---
# System prepended metadata

title: 三、語意化與進階應用

---

# 三、語意化與進階應用

## 3.1 HTML5 語意標籤與結構化思維

### 什麼是語意化 HTML?

**語意化(Semantic)** 是指「標籤本身就能表達內容的意義」。
與其使用通用的 `<div>` 或 `<span>`,我們應該選擇更具描述性的標籤,
讓瀏覽器、搜尋引擎與輔助技術都能更好地理解網頁結構。

#### 傳統寫法 vs. 語意化寫法

**傳統寫法(不推薦):**

```html
<div class="header">網站標題</div>
<div class="nav">導覽列</div>
<div class="content">主要內容</div>
<div class="footer">頁尾</div>
```

**語意化寫法(推薦):**

```html
<header>網站標題</header>
<nav>導覽列</nav>
<main>主要內容</main>
<footer>頁尾</footer>
```

> 💡 語意化的好處:
> - 程式碼可讀性更高
> - SEO 優化效果更好
> - 輔助技術(如螢幕閱讀器)能更準確解讀
> - 維護與協作更容易

---

### HTML5 常用語意標籤

#### 頁面結構標籤

| 標籤         | 語意                       | 使用情境                   |
| ------------ | -------------------------- | -------------------------- |
| `<header>`   | 頁首或區塊標題             | 網站標誌、導覽列、頁面標題 |
| `<nav>`      | 導覽區塊                   | 主選單、側邊欄選單         |
| `<main>`     | 主要內容(全頁唯一)         | 核心內容區域               |
| `<section>`  | 獨立區段                   | 文章章節、功能區塊         |
| `<article>`  | 獨立完整的內容單元         | 部落格文章、新聞報導       |
| `<aside>`    | 側邊欄或補充資訊           | 相關連結、廣告、附註       |
| `<footer>`   | 頁尾或區塊結尾             | 版權資訊、聯絡方式         |


![大典型網頁語意標籤結構圖](https://hackmd.io/_uploads/SJcfcwrEZe.jpg)

---

### 🎨 看得見的差異:開發者工具中的語意化

語意化的好處不只是理論,我們可以直接在開發者工具中看到差別!

**傳統寫法在 DevTools 中:**
```
div
  div.header
    div.logo
  div.nav
    div.menu
  div.content
    div.article
  div.footer
```
➡️ 全部都是 `div`,看不出結構與用途

**語意化寫法在 DevTools 中:**
```
header
  h1
nav
  ul
main
  article
    header
      h2
footer
```
➡️ 一眼就能看出頁面結構!


![開發者工具中的語意化對比圖](https://hackmd.io/_uploads/BJtGjvSEbx.jpg)


#### 就像整理房間:
- ❌ **傳統寫法** = 所有東西都丟在「雜物箱」裡
- ✅ **語意化寫法** = 每樣東西都放在標示清楚的收納盒裡

![整理房間比喻圖](https://hackmd.io/_uploads/r11UAPrEZl.jpg)

> 💡 實際體驗:
> 1. 打開任意新聞網站(如中央社、聯合新聞網)
> 2. 按 F12 開啟開發者工具
> 3. 觀察它們是否使用語意化標籤?
> 4. 比較專業網站與個人網站的差異

---

### 完整的語意化頁面範例

```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的部落格</title>
</head>
<body>

  <header>
    <h1>我的技術部落格</h1>
    <nav>
      <ul>
        <li><a href="#home">首頁</a></li>
        <li><a href="#about">關於</a></li>
        <li><a href="#articles">文章</a></li>
        <li><a href="#contact">聯絡</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>如何學好 HTML</h2>
        <p>發布於 2024 年 10 月 31 日</p>
      </header>

      <section>
        <h3>1. 理解結構</h3>
        <p>HTML 是網頁的骨架...</p>
      </section>

      <section>
        <h3>2. 實作練習</h3>
        <p>多動手寫程式碼...</p>
      </section>

      <footer>
        <p>作者:小明 | 分類:前端開發</p>
      </footer>
    </article>

    <aside>
      <h3>相關文章</h3>
      <ul>
        <li><a href="#">CSS 入門指南</a></li>
        <li><a href="#">JavaScript 基礎</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 我的部落格。版權所有。</p>
  </footer>

</body>
</html>
```

#### 顯示結果
![完整的語意化頁面範例](https://hackmd.io/_uploads/BkF0JDd4Wg.png)


---

### `<article>` vs. `<section>` 的差異

| 標籤        | 用途                                   | 範例                     |
| ----------- | -------------------------------------- | ------------------------ |
| `<article>` | 獨立、可重複使用的完整內容             | 部落格文章、商品卡片     |
| `<section>` | 主題性的區段,通常包含標題,依附於上下文 | 文章內的章節、功能區塊   |

> 💡 判斷原則:
> 如果這段內容可以「單獨分享或轉載」,就用 `<article>`
> 如果只是「文章內的一個段落」,就用 `<section>`。

---

### 其他重要語意標籤

#### `<time>` - 時間與日期標記

`<time>` 標籤用於標記時間或日期，提供機器可讀的格式：

```html
<!-- 日期 -->
<time datetime="2024-10-31">2024 年 10 月 31 日</time>

<!-- 日期+時間 -->
<time datetime="2024-10-31T14:30:00">2024 年 10 月 31 日下午 2:30</time>

<!-- 相對時間 -->
<p>發布於 <time datetime="2024-10-31">昨天</time></p>

<!-- 活動時間 -->
<article>
  <h2>技術分享會</h2>
  <p>時間：<time datetime="2024-11-15T19:00">11月15日晚上7點</time></p>
</article>
```

**datetime 屬性格式：**
- 日期：`YYYY-MM-DD`（如 `2024-10-31`）
- 時間：`HH:MM:SS`（如 `14:30:00`）
- 日期+時間：`YYYY-MM-DDTHH:MM:SS`（如 `2024-10-31T14:30:00`）
- 時區：加上 `Z` 或 `+08:00`（如 `2024-10-31T14:30:00+08:00`）


#### 顯示結果
![<time> - 時間與日期標記](https://hackmd.io/_uploads/r1Kf-wdVbg.png)

---

#### `<mark>` - 突出顯示文字

`<mark>` 用於標記需要注意或相關的文字（通常顯示為黃色背景）：

```html
<!-- 搜尋結果高亮 -->
<p>搜尋「HTML」的結果：學習 <mark>HTML</mark> 是網頁開發的第一步。</p>

<!-- 重點標記 -->
<p>考試重點：<mark>語意化標籤的使用</mark>佔 30 分。</p>

<!-- 引用中的重點 -->
<blockquote>
  <p>最重要的是<mark>持續練習</mark>。</p>
</blockquote>
```

> 💡 **與 `<strong>` 的差異**：`<strong>` 表示重要性，`<mark>` 表示相關性或需要注意。


#### 顯示結果
![<mark> - 突出顯示文字](https://hackmd.io/_uploads/SyeB-v_EWl.png)

    

    
---

#### `<abbr>` - 縮寫或首字母縮略詞

`<abbr>` 用於標記縮寫，並提供完整說明：

```html
<!-- 技術名詞 -->
<p><abbr title="HyperText Markup Language">HTML</abbr> 是網頁的骨架。</p>

<!-- 組織名稱 -->
<p><abbr title="World Wide Web Consortium">W3C</abbr> 制定網頁標準。</p>

<!-- 單位縮寫 -->
<p>最高溫度達 <abbr title="攝氏">℃</abbr> 35 度。</p>
```

> 💡 使用者將滑鼠懸停在縮寫上時，會顯示 `title` 屬性的完整說明。


#### 顯示結果
![<abbr> - 縮寫或首字母縮略詞](https://hackmd.io/_uploads/Skvw-vuNbx.png)
    
---

#### `<address>` - 聯絡資訊

`<address>` 用於標記作者或網站的聯絡資訊：

```html
<!-- 文章作者資訊 -->
<article>
  <h2>網頁設計入門</h2>
  <p>內容...</p>
  <footer>
    <address>
      作者：<a href="mailto:john@example.com">John Doe</a><br>
      網站：<a href="https://example.com">example.com</a>
    </address>
  </footer>
</article>

<!-- 公司聯絡資訊 -->
<footer>
  <address>
    <strong>聯絡我們</strong><br>
    地址：台北市信義區信義路五段7號<br>
    電話：<a href="tel:+886-2-1234-5678">(02) 1234-5678</a><br>
    Email：<a href="mailto:info@company.com">info@company.com</a>
  </address>
</footer>
```

> ⚠️ **注意**：`<address>` 不是用於標記一般地址，而是專門用於聯絡資訊。


#### 顯示結果
![<address> - 聯絡資訊](https://hackmd.io/_uploads/HJbsbwuEZx.png)

---

#### `<code>` 與 `<pre>` - 程式碼標記

**`<code>` - 行內程式碼：**

```html
<p>使用 <code>console.log()</code> 可以輸出訊息到控制台。</p>
<p>CSS 的 <code>display: flex</code> 可以建立彈性佈局。</p>
```

**`<pre>` - 保留格式的文字：**

```html
<pre>
function greet(name) {
  console.log('Hello, ' + name);
}
</pre>
```

**結合使用（最佳實務）：**

```html
<pre><code>
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((a, b) => a + b, 0);
console.log(sum); // 輸出: 15
</code></pre>
```


#### 顯示結果
![<code> 與 <pre> - 程式碼標記](https://hackmd.io/_uploads/BkQRZv_NWe.png)

---

#### `<kbd>` - 鍵盤輸入

`<kbd>` 用於標記鍵盤按鍵或使用者輸入：

```html
<!-- 快捷鍵說明 -->
<p>按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 複製文字。</p>
<p>使用 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 開啟開發者工具。</p>

<!-- 指令輸入 -->
<p>在終端機輸入 <kbd>npm install</kbd> 安裝套件。</p>

<!-- 巢狀使用 -->
<p>
  快捷鍵：
  <kbd><kbd>Cmd</kbd>+<kbd>S</kbd></kbd> (Mac) 或
  <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> (Windows)
</p>
```


#### 顯示結果
![<kbd> - 鍵盤輸入](https://hackmd.io/_uploads/B1mgfwOEWl.png)

---

#### `<samp>` - 程式或系統輸出範例

`<samp>` 用於標記程式、系統或終端的輸出訊息：

```html
<!-- 終端機輸出 -->
<p>執行結果：<samp>Server is running on port 3000</samp></p>

<!-- 錯誤訊息 -->
<p>
  如果出現 <samp>Error: Cannot find module 'express'</samp>，
  請先執行 <kbd>npm install express</kbd>
</p>

<!-- 完整互動範例 -->
<pre>
$ <kbd>node app.js</kbd>
<samp>
Server started
Listening on http://localhost:3000
</samp>
</pre>
```


#### 顯示結果
![<samp> - 程式或系統輸出範例](https://hackmd.io/_uploads/rJPfGDuVWx.png)

---

#### `<var>` - 變數或數學符號

`<var>` 用於標記變數名稱或數學符號：

```html
<!-- 數學公式 -->
<p>
  畢氏定理：
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
</p>

<!-- 程式變數 -->
<p>將使用者名稱儲存在變數 <var>userName</var> 中。</p>

<!-- 函式參數 -->
<p>
  <code>function add(<var>x</var>, <var>y</var>)</code>
  接受兩個參數 <var>x</var> 和 <var>y</var>
</p>
```


#### 顯示結果
![<var> - 變數或數學符號](https://hackmd.io/_uploads/S1PNzvdVZe.png)

---

#### `<blockquote>` 與 `<q>` - 引用文字

**`<blockquote>` - 區塊引用：**

```html
<!-- 基本引用 -->
<blockquote>
  <p>
    學習程式設計最重要的是持續練習，
    而不是一次讀完所有理論。
  </p>
</blockquote>

<!-- 附上來源 -->
<blockquote cite="https://example.com/article">
  <p>
    HTML5 帶來了許多語意化標籤，
    讓網頁結構更清晰易懂。
  </p>
  <footer>
    — <cite>網頁設計指南</cite>
  </footer>
</blockquote>
```


#### 顯示結果
![<blockquote> 與 <q> - 引用文字](https://hackmd.io/_uploads/S1M8GPu4bl.png)



**`<q>` - 行內引用：**

```html
<p>
  愛因斯坦曾說：<q>想像力比知識更重要。</q>
</p>

<!-- 瀏覽器會自動加上引號 -->
<p>
  老師說：<q>明天要考試</q>，大家要準備。
</p>
```


#### 顯示結果
![<q> - 行內引用](https://hackmd.io/_uploads/Syd_zPONbl.png)


**`cite` 屬性與 `<cite>` 標籤：**

```html
<!-- cite 屬性：提供引用來源 URL（機器可讀） -->
<blockquote cite="https://www.w3.org/standards/">
  <p>Web standards make the Web work for everyone</p>
</blockquote>

<!-- <cite> 標籤：標記作品名稱（人類可讀） -->
<p>
  我最喜歡的書是<cite>哈利波特</cite>。
</p>

<p>
  根據 <cite>牛津英語詞典</cite> 的定義...
</p>
```


#### 顯示結果
![cite 屬性與 <cite> 標籤：](https://hackmd.io/_uploads/ryrcGwuVZx.png)

---

#### `<del>` 與 `<ins>` - 刪除與插入

用於顯示文件的修訂歷史：

```html
<!-- 價格修改 -->
<p>
  原價 <del>NT$ 1,000</del>
  特價 <ins>NT$ 800</ins>
</p>

<!-- 文件修訂 -->
<p>
  會議時間從 <del datetime="2024-10-31T10:00">早上10點</del>
  改為 <ins datetime="2024-10-31T14:00">下午2點</ins>
</p>

<!-- 內容更正 -->
<p>
  HTML 的全名是
  <del>HyperText Makeup Language</del>
  <ins>HyperText Markup Language</ins>
</p>
```


#### 顯示結果
![<del> 與 <ins> - 刪除與插入](https://hackmd.io/_uploads/HkdnzPuE-x.png)

---

#### `<s>` - 不再準確的內容

`<s>` 用於標記不再準確或相關的內容（顯示為刪除線）：

```html
<!-- 過時的資訊 -->
<p><s>本優惠活動至2023年12月31日</s></p>
<p>活動已結束</p>

<!-- 售罄商品 -->
<ul>
  <li><s>藍色 T-shirt (已售完)</s></li>
  <li>白色 T-shirt (有庫存)</li>
</ul>
```

> 💡 **與 `<del>` 的差異**：`<del>` 表示被刪除的內容，`<s>` 表示不再準確但保留的內容。


#### 顯示結果

![<s> - 不再準確的內容](https://hackmd.io/_uploads/H1O0GDOEZe.png)


---

#### `<small>` - 附屬細則

`<small>` 用於法律聲明、版權資訊、附註等次要內容：

```html
<!-- 版權聲明 -->
<footer>
  <p>&copy; 2024 我的網站</p>
  <p><small>本網站所有內容受版權保護，未經授權不得轉載。</small></p>
</footer>

<!-- 免責聲明 -->
<p>
  立即購買！
  <small>優惠活動依實際情況為準，本公司保留最終解釋權。</small>
</p>

<!-- 附註 -->
<article>
  <h2>產品特色</h2>
  <p>超高性能處理器<small>*</small></p>
  <footer>
    <small>* 相較於前一代產品</small>
  </footer>
</article>
```


#### 顯示結果
![<small> - 附屬細則](https://hackmd.io/_uploads/BJ2lXD_VWe.png)

---

#### `<wbr>` - 建議換行位置

`<wbr>` (Word Break Opportunity) 建議瀏覽器在空間不足時可以在此處換行：

```html
<!-- 長 URL -->
<p>
  請訪問：
  https://<wbr>www.<wbr>example.<wbr>com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource
</p>

<!-- 長檔名 -->
<p>
  下載檔案：
  super<wbr>long<wbr>file<wbr>name<wbr>with<wbr>many<wbr>words.pdf
</p>

<!-- 複合詞 -->
<p>
  網頁<wbr>開發<wbr>工程師
</p>
```


> 💡 `<wbr>` 不會顯示任何內容，只在空間不足時才會換行，避免文字溢出容器。
> 通常整段網址會被視為一個英文單字，因此在部分寬度上，會超出畫面而不是自動換行


#### 顯示結果
![<wbr> - 建議換行位置](https://hackmd.io/_uploads/SypXmPuV-g.png)

---

#### `<details>` 與 `<summary>` - 可展開的內容

```html
<!-- 基本用法 -->
<details>
  <summary>點選展開更多資訊</summary>
  <p>這裡是隱藏的詳細內容。</p>
</details>

<!-- FAQ 常見問題 -->
<details>
  <summary>如何重設密碼？</summary>
  <ol>
    <li>點選「忘記密碼」連結</li>
    <li>輸入註冊的 Email</li>
    <li>點選郵件中的重設連結</li>
  </ol>
</details>

<!-- 預設展開 -->
<details open>
  <summary>重要通知</summary>
  <p>系統將於今晚 10 點進行維護。</p>
</details>
```

#### 顯示結果
![<details> 與 <summary> - 可展開的內容](https://hackmd.io/_uploads/B1XPQwO4bx.png)

![大Details 標籤互動示意圖](https://hackmd.io/_uploads/HybHMYrEWe.jpg)



---

#### `<data>` - 機器可讀的數據

`<data>` 用於標記具有機器可讀值的內容：

```html
<!-- 產品價格 -->
<data value="100">NT$ 100</data>

<!-- 商品編號 -->
<p>
  產品編號：<data value="SKU-12345">特製款 T-Shirt</data>
</p>

<!-- 產品列表 -->
<ul>
  <li>
    <data value="599">超值組合 - NT$ 599</data>
  </li>
  <li>
    <data value="399">基本款 - NT$ 399</data>
  </li>
</ul>
```

**實際應用（搭配 JavaScript）：**

```html
<ul id="products">
  <li><data value="100" class="product">商品 A - NT$ 100</data></li>
  <li><data value="200" class="product">商品 B - NT$ 200</data></li>
  <li><data value="150" class="product">商品 C - NT$ 150</data></li>
</ul>

<script>
  const products = document.querySelectorAll('.product');
  const total = Array.from(products)
    .reduce((sum, item) => sum + Number(item.value), 0);
  console.log('總價：NT$', total); // 輸出：總價：NT$ 450
</script>
```

> 💡 `<data>` 與 `data-*` 屬性的差異：`<data>` 是語意標籤，`data-*` 是自訂屬性。

---

### 語意化的最佳實務

1. **避免過度使用 `<div>` 和 `<span>`**
   - 只在沒有合適語意標籤時才使用它們
2. **每頁只能有一個 `<main>` 標籤**
   - 用於標示核心內容
3. **正確使用標題層級**
   - `<h1>` 只用一次(頁面主標題)
   - `<h2>`~`<h6>` 依邏輯遞減
4. **`<nav>` 只用於主要導覽**
   - 不要每個連結列表都用 `<nav>`

---

### 小練習

1. 將一個使用 `<div>` 的舊網頁改寫成語意化標籤。
2. 建立一個部落格文章頁面,使用 `<article>`、`<header>`、`<section>`、`<footer>`。
3. 用 `<details>` 和 `<summary>` 建立一個 FAQ(常見問題)區塊。

<br/>

## 3.2 無障礙與 HTML 可及性設計

### 什麼是網頁可及性(Web Accessibility)?

**可及性(Accessibility,簡稱 A11y)** 是指「讓所有人都能平等使用網站」,
包括視障、聽障、行動不便或使用輔助技術的使用者。

> 💡 為什麼重要?
> - **道德責任**:確保每個人都能獲取資訊
> - **法律要求**:許多國家有無障礙網頁法規
> - **SEO 優勢**:可及性好的網站,搜尋引擎也更喜歡
> - **更廣泛的受眾**:提升整體使用者體驗

---

### 視障使用者的需求

視障人士通常使用**螢幕閱讀器(Screen Reader)** 來瀏覽網頁,例如:
- NVDA(Windows)
- JAWS(Windows)
- VoiceOver(macOS/iOS)

螢幕閱讀器會「朗讀」網頁內容,因此 HTML 結構的語意與標記非常重要。

---

### 🎧 體驗螢幕閱讀器的世界

**想像你是視障朋友小明**,每天透過螢幕閱讀器(會朗讀網頁內容)上網購物、看新聞、找資料。

#### 情境一:瀏覽購物網站

**遇到沒有 alt 的圖片:**
```html
<img src="shoes.jpg">
```
🔊 螢幕閱讀器:「圖片...圖片...圖片...」
💭 小明想:「這是什麼商品?完全不知道...」

**遇到有 alt 的圖片:**
```html
<img src="shoes.jpg" alt="Nike 黑色運動鞋,尺寸24-28公分">
```
🔊 螢幕閱讀器:「圖片:Nike 黑色運動鞋,尺寸24-28公分」
✅ 小明:「太好了!我知道這是什麼,可以決定要不要買!」

---

#### 情境二:填寫註冊表單

**遇到沒有 label 的表單:**
```html
<input type="text" name="username">
<input type="password" name="password">
```
🔊 螢幕閱讀器:「文字輸入框...密碼輸入框...」
💭 小明想:「哪個是帳號?哪個是密碼?我不敢亂填...」

**遇到有 label 的表單:**
```html
<label for="username">帳號:</label>
<input type="text" id="username" name="username">

<label for="password">密碼:</label>
<input type="password" id="password" name="password">
```
🔊 螢幕閱讀器:「帳號,文字輸入框...密碼,密碼輸入框...」
✅ 小明:「清楚明瞭!我可以順利註冊了!」

---

#### 情境三:閱讀新聞網站

**沒有語意標籤的網站:**
```html
<div class="header">新聞標題</div>
<div class="content">內文...</div>
```
🔊 螢幕閱讀器:「區塊...文字...區塊...文字...」
💭 小明想:「哪裡是標題?哪裡是內文?結構好混亂...」

**使用語意標籤的網站:**
```html
<article>
  <header><h2>新聞標題</h2></header>
  <p>內文...</p>
</article>
```
🔊 螢幕閱讀器:「文章開始...標題:新聞標題...段落:內文...」
✅ 小明:「結構清晰,閱讀流暢!」

---

#### 💡 換位思考

> 💪 挑戰:嘗試只用鍵盤(不用滑鼠)操作你的網頁
> - 用 Tab 鍵切換元素
> - 用 Enter 鍵點選連結與按鈕
> - 體會行動不便者的使用體驗

**寫出可及性友善的 HTML,不只是技術,更是同理心。**
你的一行程式碼,可能改變某個人的網路體驗。

![大螢幕閱讀器使用情境圖](https://hackmd.io/_uploads/BJrlPKHNWl.jpg)


---

### 可及性的核心原則(WCAG)

**WCAG(Web Content Accessibility Guidelines)** 是全球通用的網頁可及性標準,
包含四大原則:

| 原則                      | 說明                         |
| ------------------------- | ---------------------------- |
| **可感知(Perceivable)**   | 使用者能接收到資訊           |
| **可操作(Operable)**      | 使用者能操作介面             |
| **可理解(Understandable)** | 使用者能理解內容與操作方式   |
| **穩健性(Robust)**        | 內容能在各種技術下正常運作   |

![可及性的核心原則](https://hackmd.io/_uploads/BkC4mLINWe.png)


---

### 圖片的可及性

#### 1. 務必使用 `alt` 屬性

```html
<!-- 正確 -->
<img src="dog.jpg" alt="一隻金色的黃金獵犬在草地上奔跑">

<!-- 錯誤:缺少 alt -->
<img src="dog.jpg">
```

#### 2. 裝飾性圖片使用空白 alt

```html
<img src="decoration.png" alt="">
```

> 💡 如果圖片僅為裝飾,使用 `alt=""` 讓螢幕閱讀器跳過,避免干擾。

---

### 連結的可及性

#### 1. 連結文字要有意義

```html
<!-- 不佳:「點這裡」沒有提供足夠資訊 -->
<a href="article.html">點這裡</a>閱讀更多

<!-- 良好:連結文字本身就說明目的 -->
<a href="article.html">閱讀完整文章</a>
```

#### 2. 使用 `aria-label` 補充說明

```html
<a href="https://facebook.com" aria-label="在 Facebook 上關注我們">
  <img src="fb-icon.png" alt="Facebook 圖示">
</a>
```

---

### 表單的可及性

#### 1. 每個欄位都要有 `<label>`

```html
<!-- 正確 -->
<label for="username">帳號:</label>
<input type="text" id="username" name="username">

<!-- 錯誤:沒有 label -->
<input type="text" name="username" placeholder="帳號">
```

> ⚠️ 僅使用 `placeholder` 不足以提供可及性,一定要加上 `<label>`。

#### 2. 使用 `aria-describedby` 提供額外說明

```html
<label for="password">密碼:</label>
<input type="password" id="password" aria-describedby="pwd-hint">
<small id="pwd-hint">密碼至少需要 8 個字元。</small>
```

---

### 鍵盤導航

許多使用者(包括行動不便者)完全依賴鍵盤操作,因此必須確保:

1. **所有互動元素都能用 Tab 鍵聚焦**
2. **焦點順序符合邏輯**
3. **焦點樣式清晰可見**

```css
/* 不要移除焦點框! */
button:focus {
  outline: 2px solid blue;
}
```

> ⚠️ 絕對不要使用 `outline: none` 移除焦點框,除非提供替代的視覺提示。

---

### 語意標籤的重要性

使用正確的語意標籤,螢幕閱讀器才能建立有意義的頁面大綱:

```html
<!-- 好:螢幕閱讀器能理解頁面結構 -->
<nav>...</nav>
<main>...</main>
<footer>...</footer>

<!-- 差:全部都是 div,無法辨識結構 -->
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
```

---

### ARIA 屬性簡介

**ARIA(Accessible Rich Internet Applications)** 是一組屬性,
用於增強 HTML 的可及性,尤其是動態內容。

#### 常用 ARIA 屬性

| 屬性              | 功能                       | 範例                           |
| ----------------- | -------------------------- | ------------------------------ |
| `aria-label`      | 提供元素的文字標籤         | `<button aria-label="關閉">×</button>` |
| `aria-labelledby` | 指向另一個元素作為標籤     | `<div aria-labelledby="title">` |
| `aria-describedby` | 提供額外描述               | `<input aria-describedby="hint">` |
| `aria-hidden`     | 對螢幕閱讀器隱藏元素       | `<span aria-hidden="true">🔥</span>` |
| `role`            | 定義元素的角色             | `<div role="button">` |

> ⚠️ ARIA 是「最後手段」,優先使用語意化的原生 HTML 標籤。

---

### 色彩對比

視力不佳或色盲的使用者需要足夠的色彩對比:

- **最低對比度(WCAG AA):**4.5:1(一般文字)
- **增強對比度(WCAG AAA):**7:1(一般文字)


![大色彩對比度範例圖](https://hackmd.io/_uploads/Byi0tKB4Wl.jpg)


使用工具檢查對比度:
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
- Chrome DevTools 的 Accessibility 面板

---

### 影片與音訊的可及性

1. **提供字幕(Captions)**

```html
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文字幕">
</video>
```

2. **提供文字稿(Transcript)**

對於純音訊內容,提供完整的文字稿。

---

### 可及性檢查清單

- [ ] 所有圖片都有適當的 `alt` 文字
- [ ] 所有表單欄位都有 `<label>`
- [ ] 標題層級(h1~h6)結構合理
- [ ] 連結文字有意義,不使用「點這裡」
- [ ] 色彩對比符合 WCAG AA 標準
- [ ] 可用鍵盤完整操作網站
- [ ] 使用語意化 HTML 標籤
- [ ] 影片有字幕,音訊有文字稿

---

### 小練習

1. 檢查你的網頁,為所有 `<img>` 加上適當的 `alt` 文字。
2. 確保所有表單欄位都有對應的 `<label>`。
3. 只用鍵盤(Tab 鍵)嘗試操作你的網頁,看看是否順暢。
4. 使用 Chrome DevTools 的 Lighthouse 跑一次可及性檢查。

<br/>

## 3.3 文件品質與 SEO 實務(HTML 層級)

### 什麼是 SEO?

**SEO(Search Engine Optimization,搜尋引擎最佳化)** 是一系列技術與策略,
目的是讓網站在搜尋引擎(如 Google)中獲得更好的排名。

雖然 SEO 涵蓋很多面向(內容、連結、速度等),
但 **HTML 結構的優化** 是基礎中的基礎。

> 💡 好的 HTML = 好的 SEO 基礎

---

### HTML 對 SEO 的影響

搜尋引擎的爬蟲(Spider/Bot)會讀取你的 HTML,
理解頁面的結構與內容,然後決定排名。

**重點原則:**
1. **語意化標籤**:幫助爬蟲理解內容層次
2. **正確的 meta 標籤**:提供頁面摘要與關鍵字
3. **標題層級清晰**:h1~h6 結構合理
4. **快速載入**:精簡的 HTML 減少載入時間

---

### 必備的 `<head>` 標籤

#### 1. `<title>` - 網頁標題

```html
<title>HTML 入門教學 | 我的技術部落格</title>
```

> 💡 最佳實務:
> - 長度控制在 50-60 個英文字元 (約 25-30 個中文字)
> - 字數過多時 Google 搜尋會進行剪裁
> - 包含核心關鍵字
> - 每頁標題都要不同

---

#### 2. `<meta name="description">` - 網頁描述

```html
<meta name="description" content="完整的 HTML 入門教學,從基礎語法到進階應用,適合初學者學習網頁設計。">
```

> 💡 最佳實務:
> - 長度 150-160 字元
> - 吸引人點選
> - 精準描述頁面內容

---

### 🔍 Google 搜尋結果的秘密

你知道嗎?當你在 Google 搜尋「HTML 教學」時,看到的搜尋結果**完全來自網頁的 HTML標籤**!

#### Google 搜尋結果的組成:

```
┌─────────────────────────────────────────────┐
│ HTML 入門完全指南 | 從零開始學網頁設計    │ ← 來自 <title> 標籤
├─────────────────────────────────────────────┤
│ https://example.com/html-guide              │ ← 網址
├─────────────────────────────────────────────┤
│ 完整的 HTML 入門教學,從基礎語法到進階      │
│ 應用,適合初學者學習網頁設計。涵蓋語意      │
│ 化標籤、可及性、SEO...                      │ ← 來自 <meta name="description">
├─────────────────────────────────────────────┤
│ ⭐⭐⭐⭐⭐ 4.8 顆星 · 328 則評論           │ ← 來自結構化資料(Structured Data)
└─────────────────────────────────────────────┘
```

#### 實際案例對照:

**❌ 沒寫好 meta 標籤的網站:**
```html
<title>首頁</title>
<meta name="description" content="">
```
Google 顯示:
```
首頁
https://example.com
(沒有描述,或 Google 隨機抓取頁面文字)
```
➡️ 看起來不專業,點選率低

**✅ 寫好 meta 標籤的網站:**
```html
<title>HTML 入門完全指南 | 從零開始學網頁設計</title>
<meta name="description" content="2024最新HTML教學!涵蓋基礎到進階,適合大學、高中職學生自學或作為教科書。包含60題練習題與AI輔助學習章節。">
```
Google 顯示:
```
HTML 入門完全指南 | 從零開始學網頁設計
https://example.com/html-guide
2024最新HTML教學!涵蓋基礎到進階,適合大學、高中職...
```
➡️ 清楚吸引人,點選率高!
![Google 搜尋結果構成圖](https://hackmd.io/_uploads/S1i3jKHN-e.jpg)

> 貼心提示：這個在第一次進入搜尋引擎後會不好做後續修改，因此初次更新到搜尋引擎上請先確認內容與標題正確喔。

---

#### 💡 換個角度想

**寫好 HTML 標籤 = 為你的網站寫「廣告文案」**

- `<title>` = 廣告標題(要吸引人點進來)
- `<meta description>` = 廣告內文(要說清楚價值)
- 結構化資料 = 額外優勢(星等、價格、評論數)

> 🧪 實驗:
> 搜尋你感興趣的主題,觀察前 10 名的網站:
> - 它們的標題有什麼共通點?
> - 描述如何吸引你點選?
> - 哪些網站有顯示額外資訊(星等、發布日期)?

**結論:好的 HTML 不只是技術,更是行銷!**

---

#### 3. `<meta charset="UTF-8">` - 字元編碼

```html
<meta charset="UTF-8">
```

避免中文亂碼,對國際化網站也很重要。

---

#### 4. `<meta name="viewport">` - 響應式設計

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

讓網站在手機上正常顯示,Google 優先索引行動版網站。

---

### Open Graph 標籤(社群分享)

當網頁被分享到 Facebook、Line、Twitter 時,Open Graph 決定顯示的圖片與文字:

```html
<meta property="og:title" content="HTML 入門完全指南">
<meta property="og:description" content="從零開始學會 HTML 網頁設計">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:type" content="article">
```

![大Open Graph 社群分享預覽圖](https://hackmd.io/_uploads/SJetnKH4Zg.jpg)

---

### Twitter Card 標籤

針對 Twitter 的分享優化:

```html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML 入門完全指南">
<meta name="twitter:description" content="從零開始學會 HTML 網頁設計">
<meta name="twitter:image" content="https://example.com/thumbnail.jpg">
```

---

### 標題層級的最佳實務

#### 正確的標題結構

```html
<h1>網頁設計入門</h1>

  <h2>第一章:HTML 基礎</h2>
    <h3>1.1 認識標籤</h3>
    <h3>1.2 文件結構</h3>

  <h2>第二章:CSS 樣式</h2>
    <h3>2.1 選擇器</h3>
    <h3>2.2 盒模型</h3>
```

#### 錯誤的標題結構

```html
<h1>標題</h1>
<h3>跳過 h2 直接用 h3</h3>  <!-- 不佳 -->
<h1>又一個 h1</h1>  <!-- 一頁多個 h1,不推薦 -->
```

> ⚠️ 一個頁面應該只有一個 `<h1>`,代表主題。
> 標題層級不要跳級(h1 → h3),應該循序漸進。

---

### 語意化標籤對 SEO 的幫助

使用 `<article>`、`<section>`、`<nav>` 等語意標籤,
幫助搜尋引擎更準確地理解頁面結構:

```html
<article>
  <h2>文章標題</h2>
  <p>內容...</p>
</article>
```

比起全部使用 `<div>`,語意標籤能提供更清晰的結構訊號。

---

### 圖片 SEO

#### 1. 使用描述性檔名

```html
<!-- 好 -->
<img src="golden-retriever-running.jpg" alt="金色黃金獵犬在草地上奔跑">

<!-- 差 -->
<img src="IMG_1234.jpg" alt="圖片">
```

#### 2. 填寫 alt 文字

`alt` 不只是可及性工具,也是 SEO 的關鍵:
- 圖片無法載入時顯示文字
- 搜尋引擎圖片搜尋的依據

---

### 連結結構

#### 1. 內部連結

在網站內建立合理的連結結構,幫助爬蟲索引更多頁面:

```html
<nav>
  <a href="/">首頁</a>
  <a href="/about">關於</a>
  <a href="/blog">部落格</a>
</nav>
```

#### 2. 外部連結

連結到權威網站時,使用 `rel="noopener"` 提升安全性:

```html
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部連結</a>
```

---

### 結構化資料(Structured Data)

使用 JSON-LD 格式提供結構化資料,讓搜尋結果更豐富:

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML 入門完全指南",
  "author": {
    "@type": "Person",
    "name": "小明"
  },
  "datePublished": "2024-10-31",
  "image": "https://example.com/article-image.jpg"
}
</script>
```

這能產生 Google 的「複合式搜尋結果」(Rich Snippets),
例如顯示作者、發布日期、評分等。

![Google 搜尋結果構成圖](https://hackmd.io/_uploads/SyrTw_8E-l.jpg)


---

### 網頁速度與效能

#### 1. 精簡 HTML

移除不必要的空白與註解:

```html
<!-- 開發階段 -->
<div>
  <p>文字</p>
</div>

<!-- 正式環境(壓縮後) -->
<div><p>文字</p></div>
```

#### 2. 延遲載入圖片

```html
<img src="photo.jpg" alt="照片" loading="lazy">
```

`loading="lazy"` 讓圖片在進入視窗時才載入,加快初始載入速度。

---

### robots.txt 與 sitemap.xml

雖然不是 HTML,但這兩個檔案對 SEO 很重要:

#### robots.txt(控制爬蟲行為)

```
User-agent: *
Disallow: /admin/
Allow: /
Sitemap: https://example.com/sitemap.xml
```

#### sitemap.xml(網站地圖)

列出網站所有重要頁面,幫助爬蟲索引:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2024-10-31</lastmod>
    <priority>1.0</priority>
  </url>
</urlset>
```

---

### SEO 檢查清單

- [ ] 每頁都有獨特的 `<title>` 與 `<meta description>`
- [ ] 只有一個 `<h1>`,標題層級結構合理
- [ ] 所有圖片都有描述性的 `alt` 文字
- [ ] 使用語意化 HTML 標籤
- [ ] 手機版顯示正常(響應式設計)
- [ ] 頁面載入速度快
- [ ] 使用 HTTPS
- [ ] 建立 sitemap.xml 並提交給 Google

---

### 實用工具

1. **Google Search Console** - 監控網站在 Google 的表現
2. **Lighthouse(Chrome DevTools)** - 網站品質檢查
3. **PageSpeed Insights** - 速度分析
4. **Schema Markup Validator** - 驗證結構化資料

---

### 小練習

1. 為你的網頁加上完整的 `<head>` 標籤,包含 title、description、OG 標籤。
2. 檢查標題層級是否合理,確保只有一個 h1。
3. 使用 Lighthouse 跑一次 SEO 檢查,看看得分多少。
4. 為網站的主要圖片加上描述性的檔名與 alt 文字。

---

### ✨ 本章小結

- **語意化 HTML** 不只是寫法問題,而是思維方式。正確使用 `<header>`、`<nav>`、`<main>`、`<article>` 等標籤,能讓程式碼更易讀、易維護,也對 SEO 與可及性有幫助。
- **無障礙設計** 是網頁開發者的責任,從 `alt` 文字到鍵盤導航,每個細節都能讓更多人受惠。
- **SEO 優化** 從 HTML 開始。完善的 meta 標籤、清晰的標題結構、語意化標記,都是搜尋排名的基礎。

---

### 🎯 準備好讓網頁「活起來」了嗎?

到目前為止,你已經完整掌握了 HTML 的所有知識:
✅ 基礎語法與文件結構(第一章)
✅ 各種內容標籤的使用(第二章)
✅ 語意化、可及性、SEO 最佳實務(第三章)

現在你可以建立**結構完整、語意清晰、專業規範**的網頁了。

但你可能發現一個問題:
> 💭 「網頁看起來好樸素,毫無設計感...」
> 💭 「按鈕點了沒反應,無法跟使用者互動...」

**這是因為我們目前只用了 HTML(內容結構),還沒有加入:**
- **CSS(外觀樣式)** ← 讓網頁變漂亮!
- **JavaScript(互動功能)** ← 讓網頁動起來!

#### 想像一下建築的比喻:
- 🏗️ **HTML = 鋼筋結構**(你已經學會了!)
- 🎨 **CSS = 裝潢、油漆、家具**(下一章開始學!)
- ⚡ **JavaScript = 電力、開關、自動化**(接著學!)

只有三者結合,才能打造一個**既美觀又實用**的現代網站。


---


### 📝 選擇練習題:語意化與進階應用

**1. 下列何者是 HTML5 的語意標籤?**
- A) `<div>`
- B) `<span>`
- C) `<header>`
- D) `<container>`

<details>
<summary>點選查看答案</summary>
答案: C) `<header>`
</details>

**2. 一個網頁應該有幾個 `<main>` 標籤?**
- A) 0 個
- B) 1 個
- C) 2 個以上
- D) 不限制

<details>
<summary>點選查看答案</summary>
答案: B) 1 個
</details>

**3. 若要標示機器可讀的日期與時間，應使用哪個語意標籤？**
- A) `<span datetime="...">`
- B) `<time datetime="...">`
- C) `<date value="...">`
- D) `<moment time="...">`

<details>
<summary>點選查看答案</summary>
答案: B) `<time datetime="...">`
</details>

**4. 對於純裝飾性的圖片,`alt` 屬性應該如何設定?**
- A) 不需要 alt 屬性
- B) `alt=""`(空白)
- C) `alt="裝飾圖片"`
- D) `alt="image"`

<details>
<summary>點選查看答案</summary>
答案: B) `alt=""`(空白)
</details>

**5. 下列何者不是 WCAG 的核心原則?**
- A) 可感知(Perceivable)
- B) 可操作(Operable)
- C) 可獲利(Profitable)
- D) 可理解(Understandable)

<details>
<summary>點選查看答案</summary>
答案: C) 可獲利(Profitable)
</details>

**6. 表單欄位的 `<label>` 主要用途是什麼?**
- A) 美化樣式
- B) 提供欄位說明,提升可及性
- C) 驗證輸入
- D) 儲存資料

<details>
<summary>點選查看答案</summary>
答案: B) 提供欄位說明,提升可及性
</details>

**7. `<title>` 標籤的建議長度是多少字元?**
- A) 20-30 字元
- B) 50-60 字元
- C) 100-120 字元
- D) 不限制

<details>
<summary>點選查看答案</summary>
答案: B) 50-60 字元
</details>

---

#### 綜合應用題

**8. 小華想打造一個可及性友善的個人部落格，下列哪個設計最不符合 WCAG 標準？**
- A) 所有圖片都加上 `alt` 屬性，純裝飾圖片使用 `alt=""`
- B) 表單欄位都有對應的 `<label>`，且 `for` 與 `id` 正確配對
- C) 使用淺灰色文字（#ccc）搭配白色背景（#fff）
- D) 確保所有功能都可以用鍵盤操作（Tab 鍵導航）

<details>
<summary>點選查看答案</summary>
答案: C) 使用淺灰色文字（#ccc）搭配白色背景（#fff）

**解析：**
- A) 正確：圖片必須有 `alt`，裝飾性圖片用空 `alt` 讓螢幕閱讀器略過
- B) 正確：這是表單可及性的核心要求
- C) **錯誤**：淺灰色與白色對比度不足，視力較弱或色盲者難以閱讀。WCAG 要求文字對比度至少 4.5:1（AA 級）或 7:1（AAA 級）
- D) 正確：鍵盤導航是可及性的基本要求

**WCAG 四大原則：**
1. **可感知(Perceivable)** - 足夠的對比度屬於此類
2. **可操作(Operable)** - 鍵盤導航
3. **可理解(Understandable)** - 清楚的標籤
4. **穩健(Robust)** - 正確的語意標籤
</details>

**9. 下列哪個網頁結構最符合語意化與 SEO 最佳實務？**

```html
<!-- 選項 A -->
<div class="header">
  <div class="title">我的部落格</div>
  <div class="menu">...</div>
</div>
<div class="content">
  <div class="post">...</div>
</div>

<!-- 選項 B -->
<header>
  <h1>我的部落格</h1>
  <nav>...</nav>
</header>
<div id="main">
  <div class="article">...</div>
</div>

<!-- 選項 C -->
<header>
  <h1>我的部落格</h1>
  <nav aria-label="主選單">...</nav>
</header>
<main>
  <article>
    <header><h2>文章標題</h2></header>
    <p>內容...</p>
  </article>
</main>
<footer>...</footer>

<!-- 選項 D -->
<body>
  <h1>我的部落格</h1>
  <ul><li><a href="#">首頁</a></li></ul>
  <h2>文章標題</h2>
  <p>內容...</p>
  <p>版權所有</p>
</body>
```

- A) 選項 A
- B) 選項 B
- C) 選項 C
- D) 選項 D

<details>
<summary>點選查看答案</summary>
答案: C) 選項 C

**解析：**
選項 C 最完整且符合最佳實務：
1. ✅ 使用語意化標籤（`<header>`, `<nav>`, `<main>`, `<article>`, `<footer>`）
2. ✅ `<h1>` 作為唯一的網站主標題
3. ✅ 使用 `<main>` 標籤（一頁只能有一個）
4. ✅ 文章用 `<article>` 包裹，表示獨立完整內容
5. ✅ 加上 ARIA 屬性（`aria-label`）提升可及性
6. ✅ 文章內部有自己的 `<header>`（標籤可重複使用）
7. ✅ 有 `<footer>` 頁尾

其他選項問題：
- A) 全用 `<div>`，完全沒有語意，搜尋引擎與螢幕閱讀器難以理解結構
- B) 較好但不完美：用 `<div id="main">` 而非 `<main>` 標籤
- D) 缺少 `<header>`、`<nav>`、`<main>`、`<article>` 等語意標籤，結構平坦

**記住：語意化 = 結構清晰 = SEO 友善 = 可及性佳**
</details>

**10. 若要優化一個新聞網站的 SEO，下列哪個策略最完整？**
- A) 只要在 `<head>` 中加入 `<meta name="keywords">`，列出所有關鍵字
- B) 每頁都用相同的 `<title>`，統一品牌形象
- C) 結合 `<title>`、`<meta description>`、語意標籤、結構化資料、Open Graph 標籤
- D) 把所有文字都設定為 `<h1>`，增加搜尋權重

<details>
<summary>點選查看答案</summary>
答案: C) 結合 

**解析：**
- A) 錯誤：Google 早已不看 `keywords` meta 標籤（因為被濫用）
- B) 錯誤：每頁應該有獨特的 `<title>`，描述該頁內容
- C) **正確**：現代 SEO 需要多方面優化：
  - `<title>` - 搜尋結果標題（50-60 字元）
  - `<meta description>` - 搜尋結果摘要（150-160 字元）
  - 語意標籤 - 幫助搜尋引擎理解結構
  - 結構化資料 - 顯示星等、價格、發布日期等
  - Open Graph - 社群分享時的顯示內容
- D) 錯誤：只能有一個 `<h1>`，濫用會被懲罰

**SEO 綜合策略：**
```html
<head>
  <!-- 基礎 SEO -->
  <title>新聞標題 | 網站名稱</title>
  <meta name="description" content="新聞摘要...">

  <!-- Open Graph（社群分享）-->
  <meta property="og:title" content="新聞標題">
  <meta property="og:description" content="新聞摘要">
  <meta property="og:image" content="縮圖.jpg">

  <!-- 結構化資料（JSON-LD）-->
  <script type="application/ld+json">
  {
    "@type": "NewsArticle",
    "headline": "新聞標題",
    "datePublished": "2025-01-01"
  }
  </script>
</head>
<body>
  <!-- 語意化結構 -->
  <article>
    <h1>新聞標題</h1>
    <time datetime="2025-01-01">2025年1月1日</time>
    <p>內容...</p>
  </article>
</body>
```
</details>

**11. 下列關於 `<article>` 和 `<section>` 標籤的使用，何者正確？**
- A) `<article>` 只能用一次，`<section>` 可以用多次
- B) `<article>` 內不能再包含 `<article>`
- C) `<article>` 是獨立完整的內容，可以單獨分發；`<section>` 是主題性區段
- D) `<article>` 和 `<section>` 完全相同，可以互換使用

<details>
<summary>點選查看答案</summary>
答案: C) `<article>` 是獨立完整的內容，可以單獨分發；`<section>` 是主題性區段

**解析：**
- A) 錯誤：兩者都可以多次使用
- B) 錯誤：`<article>` 內可以包含 `<article>`（例如文章內的評論）
- C) **正確**：這是兩者的核心差異
  - `<article>` - 獨立、完整、可分發（如部落格文章、新聞、產品卡片）
  - `<section>` - 主題性區段，依賴上下文（如章節、分頁）
- D) 錯誤：兩者語意不同，不可互換

**實際範例：**
```html
<article>  <!-- 部落格文章 -->
  <h2>如何學習 HTML</h2>

  <section>  <!-- 文章的第一部分 -->
    <h3>為什麼要學 HTML</h3>
    <p>...</p>
  </section>

  <section>  <!-- 文章的第二部分 -->
    <h3>學習步驟</h3>
    <p>...</p>
  </section>

  <article>  <!-- 評論也是獨立完整的內容 -->
    <h4>讀者 小明 的評論</h4>
    <p>寫得很好！</p>
  </article>
</article>
```

**記憶口訣：**
- `<article>` = 可以單獨 RSS 訂閱的內容
- `<section>` = 文章內的章節
</details>

**12. 觀察以下兩個網站在 Google 搜尋結果的表現，哪個網站的 HTML 設定較完整？**

```
網站 A 的搜尋結果：
┌─────────────────────────────────┐
│ 首頁                            │
│ https://example-a.com           │
│ (沒有描述)                      │
└─────────────────────────────────┘

網站 B 的搜尋結果：
┌─────────────────────────────────┐
│ HTML 入門教學 | 從零開始學網頁  │
│ https://example-b.com/html      │
│ 2025 最新 HTML 教學，涵蓋語意... │
│ ⭐⭐⭐⭐⭐ 4.8 · 評論 328 則    │
└─────────────────────────────────┘
```

網站 B 可能包含以下哪些設定？
- A) 只有 `<title>` 標籤
- B) `<title>` 和 `<h1>` 標籤
- C) `<title>`、`<meta description>`、結構化資料(Structured Data)
- D) 只有 Open Graph 標籤

<details>
<summary>點選查看答案</summary>
答案: C) 

**解析：**
網站 B 的搜尋結果顯示：
1. **標題** - 來自 `<title>` 標籤
2. **描述** - 來自 `<meta name="description">` 標籤
3. **星等評論** - 來自結構化資料（Schema.org JSON-LD）

```html
<!-- 網站 B 的 HTML -->
<head>
  <title>HTML 入門教學 | 從零開始學網頁</title>
  <meta name="description" content="2025 最新 HTML 教學，涵蓋語意化標籤、可及性、SEO 優化，適合初學者。">

  <!-- 結構化資料 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Course",
    "name": "HTML 入門教學",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.8",
      "reviewCount": "328"
    }
  }
  </script>
</head>
```

**為什麼其他選項錯誤：**
- A) 只有標題，無法顯示描述與星等
- B) `<h1>` 不會顯示在搜尋結果中
- D) Open Graph 用於社群分享，不影響 Google 搜尋結果

**學習重點：**
完整的 SEO 需要三個層面配合：
1. **基礎 meta 標籤** - `<title>` 和 `<meta description>`
2. **結構化資料** - 顯示額外資訊（星等、價格、日期）
3. **語意化 HTML** - 幫助搜尋引擎理解內容結構
</details>

---

**13. 完整的語意化網頁結構應包含哪些主要標籤？**
- A) `<div>`、`<span>`、`<p>`
- B) `<header>`、`<main>`、`<footer>`
- C) `<table>`、`<form>`、`<list>`
- D) `<section>`、`<aside>`、`<nav>` 但不需要 `<main>`

<details>
<summary>點選查看答案</summary>
答案: B) `<header>`、`<main>`、`<footer>`

解析：語意化網頁的基本結構包括 `<header>`(頁首)、`<main>`(主要內容)、`<footer>`(頁尾)，搭配 `<nav>`、`<article>`、`<section>` 等。
</details>

**14. `<meta name="description">` 標籤的主要用途是什麼？**
- A) 設定網頁的字元編碼
- B) 提供網頁摘要給搜尋引擎
- C) 定義網頁的標題
- D) 設定網頁的關鍵字

<details>
<summary>點選查看答案</summary>
答案: B) 提供網頁摘要給搜尋引擎

解析：`<meta name="description">` 用於提供網頁的簡短描述，會顯示在搜尋引擎結果中，對 SEO 很重要。
</details>

---

**15. 以下語意化網頁結構中，哪個是最嚴重的錯誤？**

```html
<body>
  <header>
    <h1>我的網站</h1>
  </header>

  <main>
    <article>
      <h3>最新文章</h3>
    </article>
  </main>

  <main>
    <section>
      <h2>關於我</h2>
    </section>
  </main>
</body>
```

- A) 標題從 `<h1>` 跳到 `<h3>`
- B) 重複使用兩個 `<main>` 標籤
- C) 缺少 `<nav>` 導覽列
- D) 缺少 `<footer>` 頁尾

<details>
<summary>點選查看答案</summary>
答案: B) 重複使用兩個 `<main>` 標籤

解析：一個網頁只能有一個 `<main>` 標籤，代表頁面的主要內容。重複使用會違反 HTML 規範。
</details>
