# 三、語意化與進階應用
## 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>` | 頁尾或區塊結尾 | 版權資訊、聯絡方式 |
---
### 🎨 看得見的差異:開發者工具中的語意化
語意化的好處不只是理論,我們可以直接在開發者工具中看到差別!
**傳統寫法在 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
```
➡️ 一眼就能看出頁面結構!
#### 就像整理房間:
- ❌ **傳統寫法** = 所有東西都丟在「雜物箱」裡
- ✅ **語意化寫法** = 每樣東西都放在標示清楚的收納盒裡
> 💡 實際體驗:
> 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>© 2024 我的部落格。版權所有。</p>
</footer>
</body>
</html>
```
#### 顯示結果
---
### `<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`）
#### 顯示結果
---
#### `<mark>` - 突出顯示文字
`<mark>` 用於標記需要注意或相關的文字（通常顯示為黃色背景）：
```html
<!-- 搜尋結果高亮 -->
<p>搜尋「HTML」的結果：學習 <mark>HTML</mark> 是網頁開發的第一步。</p>
<!-- 重點標記 -->
<p>考試重點：<mark>語意化標籤的使用</mark>佔 30 分。</p>
<!-- 引用中的重點 -->
<blockquote>
<p>最重要的是<mark>持續練習</mark>。</p>
</blockquote>
```
> 💡 **與 `<strong>` 的差異**：`<strong>` 表示重要性，`<mark>` 表示相關性或需要注意。
#### 顯示結果
---
#### `<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` 屬性的完整說明。
#### 顯示結果
---
#### `<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>` 不是用於標記一般地址，而是專門用於聯絡資訊。
#### 顯示結果
---
#### `<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>
```
#### 顯示結果
---
#### `<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>
```
#### 顯示結果
---
#### `<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>
```
#### 顯示結果
---
#### `<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>
```
#### 顯示結果
---
#### `<blockquote>` 與 `<q>` - 引用文字
**`<blockquote>` - 區塊引用：**
```html
<!-- 基本引用 -->
<blockquote>
<p>
學習程式設計最重要的是持續練習，
而不是一次讀完所有理論。
</p>
</blockquote>
<!-- 附上來源 -->
<blockquote cite="https://example.com/article">
<p>
HTML5 帶來了許多語意化標籤，
讓網頁結構更清晰易懂。
</p>
<footer>
— <cite>網頁設計指南</cite>
</footer>
</blockquote>
```
#### 顯示結果
**`<q>` - 行內引用：**
```html
<p>
愛因斯坦曾說：<q>想像力比知識更重要。</q>
</p>
<!-- 瀏覽器會自動加上引號 -->
<p>
老師說：<q>明天要考試</q>，大家要準備。
</p>
```
#### 顯示結果
**`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>
```
#### 顯示結果
---
#### `<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>
```
#### 顯示結果
---
#### `<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>` 表示不再準確但保留的內容。
#### 顯示結果
---
#### `<small>` - 附屬細則
`<small>` 用於法律聲明、版權資訊、附註等次要內容：
```html
<!-- 版權聲明 -->
<footer>
<p>© 2024 我的網站</p>
<p><small>本網站所有內容受版權保護，未經授權不得轉載。</small></p>
</footer>
<!-- 免責聲明 -->
<p>
立即購買！
<small>優惠活動依實際情況為準，本公司保留最終解釋權。</small>
</p>
<!-- 附註 -->
<article>
<h2>產品特色</h2>
<p>超高性能處理器<small>*</small></p>
<footer>
<small>* 相較於前一代產品</small>
</footer>
</article>
```
#### 顯示結果
---
#### `<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>` 不會顯示任何內容，只在空間不足時才會換行，避免文字溢出容器。
> 通常整段網址會被視為一個英文單字，因此在部分寬度上，會超出畫面而不是自動換行
#### 顯示結果
---
#### `<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>
```
#### 顯示結果
---
#### `<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,不只是技術,更是同理心。**
你的一行程式碼,可能改變某個人的網路體驗。
---
### 可及性的核心原則(WCAG)
**WCAG(Web Content Accessibility Guidelines)** 是全球通用的網頁可及性標準,
包含四大原則:
| 原則 | 說明 |
| ------------------------- | ---------------------------- |
| **可感知(Perceivable)** | 使用者能接收到資訊 |
| **可操作(Operable)** | 使用者能操作介面 |
| **可理解(Understandable)** | 使用者能理解內容與操作方式 |
| **穩健性(Robust)** | 內容能在各種技術下正常運作 |
---
### 圖片的可及性
#### 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(一般文字)
使用工具檢查對比度:
- [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教學!涵蓋基礎到進階,適合大學、高中職...
```
➡️ 清楚吸引人,點選率高!
> 貼心提示：這個在第一次進入搜尋引擎後會不好做後續修改，因此初次更新到搜尋引擎上請先確認內容與標題正確喔。
---
#### 💡 換個角度想
**寫好 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">
```
---
### 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),
例如顯示作者、發布日期、評分等。
---
### 網頁速度與效能
#### 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>
Sign in with Wallet
Connect another wallet