# HTML 語意標籤
## 網頁結構圖
*圖示說明:展示了 HTML5 語意標籤在網頁中的典型配置*
---
## 核心結構標籤
### `<header>` - 頁首區域
**用途**: 放置網頁的主標題(通常使用 `<h1>`)、Logo、導航選單或其他引導性內容。
**典型位置**: 網頁最上方或 `<article>` / `<section>` 的開頭
```html
<header>
<h1>網站名稱</h1>
<nav>
<!-- 導航選單 -->
</nav>
</header>
```
---
### `<nav>` - 導航選單
**用途**: 包含網站的主要導航連結,如選單列、麵包屑導航等。
**注意**: 並非所有連結都需要放在 `<nav>` 中,僅用於主要導航區塊。
```html
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">關於我們</a></li>
<li><a href="/contact">聯絡我們</a></li>
</ul>
</nav>
```
---
### `<main>` - 主要內容
**用途**: 包含網頁的主要內容,每個頁面只能有一個 `<main>` 標籤。
**特性**:
- 應排除在 `<header>`、`<footer>`、`<nav>`、`<aside>` 之外
- 代表頁面的核心內容
```html
<main>
<article>
<h2>文章標題</h2>
<p>文章內容...</p>
</article>
</main>
```
---
### `<aside>` - 側邊欄
**用途**: 包含與主內容相關但獨立的附加內容,如側邊欄、廣告、相關文章等。
**適用場景**:
- 作者簡介
- 相關連結
- 廣告區塊
- 標籤雲
```html
<aside>
<h3>相關文章</h3>
<ul>
<li><a href="#">推薦文章 1</a></li>
<li><a href="#">推薦文章 2</a></li>
</ul>
</aside>
```
---
### `<article>` - 獨立文章
**用途**: 代表一個完整且獨立的內容單元,可以獨立分發或重複使用。
**典型應用**:
- 部落格文章
- 新聞報導
- 論壇貼文
- 評論內容
**判斷標準**: 問自己「這段內容可以單獨被 RSS 訂閱嗎?」
```html
<article>
<header>
<h2>文章標題</h2>
<time datetime="2024-11-04">2024年11月4日</time>
</header>
<p>文章內容...</p>
<footer>
<p>作者:張三</p>
</footer>
</article>
```
---
### `<section>` - 內容區段
**用途**: 將文章或內容劃分為主題性的區塊,通常帶有標題。
**與 `<article>` 的區別**:
- `<article>`: 完整且獨立的內容
- `<section>`: 內容的一個章節或區段
```html
<article>
<h1>旅遊指南</h1>
<section>
<h2>交通方式</h2>
<p>交通相關內容...</p>
</section>
<section>
<h2>住宿推薦</h2>
<p>住宿相關內容...</p>
</section>
</article>
```
---
### `<footer>` - 頁尾區域
**用途**: 包含頁尾資訊,如版權聲明、聯絡方式、相關連結等。
**適用範圍**: 可用於整個網頁或 `<article>` / `<section>` 的底部
```html
<footer>
<p>© 2024 公司名稱. 版權所有.</p>
<address>
<a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>
```
---
## 內容語意標籤
### `<mark>` - 標記文字
**用途**: 視覺上突出顯示文字,通常呈現黃色背景(類似螢光筆效果)。
**使用場景**:
- 搜尋結果關鍵字高亮
- 引用文字中的重點標記
```html
<p>搜尋結果:<mark>HTML 語意標籤</mark>的使用方式</p>
```
---
### `<time>` - 日期時間
**用途**: 標記日期或時間,提供機器可讀的格式。
**屬性**: `datetime` 屬性使用 ISO 8601 格式
```html
<p>發布時間:<time datetime="2024-11-04T14:30:00">2024年11月4日 下午2:30</time></p>
<!-- 僅日期 -->
<time datetime="2024-11-04">2024年11月4日</time>
<!-- 僅時間 -->
<time datetime="14:30">下午2:30</time>
```
---
## 互動式標籤
### `<dialog>` - 對話框
**用途**: 創建模態對話框或彈出視窗,用於與使用者互動。
**重要屬性**:
- `open`: 控制對話框的顯示/隱藏
**JavaScript 操作**:
```javascript
// 開啟對話框
dialog.showModal()
// 關閉對話框
dialog.close()
```
**完整範例**:
```html
<dialog id="myDialog">
<h2>確認操作</h2>
<p>您確定要執行此操作嗎?</p>
<button onclick="document.getElementById('myDialog').close()">確定</button>
<button onclick="document.getElementById('myDialog').close()">取消</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">開啟對話框</button>
```
**⚠️ 注意事項**:
- 瀏覽器支援度不同,建議檢查相容性
- 需要 JavaScript 控制開啟/關閉
- 可使用 polyfill 提升舊版瀏覽器支援
---
### `<details>` 與 `<summary>` - 可折疊內容
**用途**: 創建可展開/收合的內容區塊,原生支援不需 JavaScript。
**結構**:
- `<details>`: 包裹整個可折疊區塊
- `<summary>`: 定義可點擊的標題
**屬性**:
- `open`: 預設展開狀態
**範例**:
```html
<details>
<summary>常見問題 1:如何註冊帳號?</summary>
<p>點擊右上角的「註冊」按鈕,填寫相關資訊即可完成註冊。</p>
</details>
<details open>
<summary>常見問題 2:忘記密碼怎麼辦?</summary>
<p>請點擊登入頁面的「忘記密碼」連結,系統會寄送重設密碼的郵件。</p>
</details>
```
**⚠️ 注意事項**:
- 較舊的瀏覽器(如 IE)不支援
- 建議提供替代方案或使用 JavaScript polyfill
- 預設樣式可透過 CSS 自訂
---
## 媒體相關標籤
### `<figure>` 與 `<figcaption>` - 圖文組合
**用途**: 將圖片、圖表、程式碼等媒體內容與其說明文字組合。
**結構**:
- `<figure>`: 包裹媒體內容
- `<figcaption>`: 提供標題或說明文字
**適用內容**:
- 圖片
- 圖表
- 程式碼片段
- 引用內容
- 影片
**範例**:
```html
<!-- 圖片 -->
<figure>
<img src="chart.png" alt="2024年銷售數據圖表">
<figcaption>圖1:2024年第一季度銷售數據統計</figcaption>
</figure>
<!-- 程式碼 -->
<figure>
<pre><code>
function hello() {
console.log('Hello World');
}
</code></pre>
<figcaption>範例 1:基本的 JavaScript 函式</figcaption>
</figure>
<!-- 引用 -->
<figure>
<blockquote>
<p>生活就像騎自行車,想保持平衡就得往前走。</p>
</blockquote>
<figcaption>— 愛因斯坦</figcaption>
</figure>
```
**⚠️ 注意事項**:
- 非必要使用,簡單圖片可直接用 `<img>`
- 主要用於提供語意化和提升可讀性
- `<figcaption>` 可放在 `<figure>` 的開頭或結尾
---
## 聯絡資訊標籤
### `<address>` - 聯絡資訊
**用途**: 標記文章或網站作者/擁有者的聯絡資訊。
**適用範圍**:
- 可用於整個網頁(通常放在 `<footer>` 中)
- 可用於 `<article>` 內標記文章作者資訊
**內容限制**: 僅用於聯絡資訊,不可用於一般地址
**範例**:
```html
<!-- 網站聯絡資訊 -->
<footer>
<address>
<p><strong>ABC 科技公司</strong></p>
<p>地址:台北市信義區信義路五段7號</p>
<p>電話:<a href="tel:+886-2-1234-5678">02-1234-5678</a></p>
<p>Email:<a href="mailto:contact@abc.com">contact@abc.com</a></p>
</address>
</footer>
<!-- 文章作者資訊 -->
<article>
<h1>網頁設計最佳實踐</h1>
<p>文章內容...</p>
<footer>
<address>
<p>作者:<a href="mailto:author@example.com">張小明</a></p>
<p>網站:<a href="https://example.com">example.com</a></p>
</address>
</footer>
</article>
```
**⚠️ 注意事項**:
- 預設樣式為斜體,可使用 CSS 調整
- 僅用於聯絡資訊,不適用於一般郵寄地址
- 確保提供的資訊正確且最新
- 不會自動格式化內容,需自行安排排版
---
## 最佳實踐建議
### 語意標籤選用原則
1. **優先使用語意標籤**: 能用 `<nav>` 就不用 `<div class="nav">`
2. **合理巢狀結構**: `<article>` 可包含多個 `<section>`,反之亦然
3. **一頁一個 `<main>`**: 每個頁面只應有一個主要內容區塊
4. **適當使用 `<header>` / `<footer>`**: 不只網頁有,`<article>` 和 `<section>` 也可以有
### SEO 與無障礙優化
- ✅ 使用語意標籤提升 SEO 排名
- ✅ 輔助螢幕閱讀器正確解讀頁面結構
- ✅ 提供清晰的文件大綱(Document Outline)
- ✅ 改善搜尋引擎爬蟲的理解能力
### 常見錯誤
- ❌ 過度使用 `<div>` 和 `<span>`
- ❌ 不恰當的標籤巢狀(如 `<main>` 放在 `<article>` 內)
- ❌ 多個 `<main>` 標籤
- ❌ 所有連結都放在 `<nav>` 中
---
## 瀏覽器支援度
大多數現代瀏覽器都支援 HTML5 語意標籤,但以下標籤需特別注意:
| 標籤 | 支援度 | 備註 |
|------|--------|------|
| `<dialog>` | 中等 | IE 不支援,建議使用 polyfill |
| `<details>` / `<summary>` | 良好 | IE 不支援,可用 JavaScript 替代 |
| 其他語意標籤 | 優秀 | 所有現代瀏覽器完整支援 |
**舊版瀏覽器支援**: 可使用 [HTML5 Shiv](https://github.com/aFarkas/html5shiv) 增加相容性
---
## 參考資源
- [MDN Web Docs - HTML 元素參考](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element)
- [HTML5 Doctor - 語意標籤指南](http://html5doctor.com/)
- [Can I Use - 瀏覽器支援度查詢](https://caniuse.com/)
---
*如有錯誤或建議,歡迎留言指正!*
Sign in with Wallet
Connect another wallet