Learning Objectives
- 說明 header、nav、main、article、section、aside、footer 各自代表頁面的哪一種區塊
- 判斷什麼時候該用語意元素，什麼時候用沒有意義的 div 與 span
- 說明地標（landmark）如何幫助螢幕閱讀器的使用者，並知道 header、footer、section 在什麼情況下才是地標
- 寫出一個 h1、不跳級的標題大綱
- 把用 div 堆出來的頁面改寫成語意化的 HTML
只用 div 的頁面，機器讀不懂
看一個網頁時，你會自然分出「這是頁首、這是選單、這是文章、這是頁尾」。
但如果整頁都用 <div> 寫，HTML 裡只有一層又一層「沒有意義的方塊」，這種寫法有個暱稱叫 div 湯（div soup）：
<div class="header">…</div>
<div class="menu">…</div>
<div class="content">…</div>
<div class="footer">…</div>
class 名稱是寫給人和 CSS 看的，瀏覽器、螢幕閱讀器、搜尋引擎不會因為 class 叫 header 就知道它是頁首。 語意化（semantic）HTML 就是改用有意義的元素：
<header>…</header>
<nav>…</nav>
<main>…</main>
<footer>…</footer>
畫面上看起來完全一樣（這些元素預設都只是區塊，沒有特別的樣式），差別在機器讀得懂：
- 螢幕閱讀器可以列出「頁首、導覽、主要內容、頁尾」，讓使用者直接跳過去。
- 搜尋引擎比較容易分辨哪一塊是主要內容、哪一塊是重複出現的選單。
- 你自己與合作的人打開原始碼，也一眼看得出頁面的結構。
語意元素一覽
| 元素 | 代表 | 常見內容 |
|---|---|---|
<header> |
頁首，或某篇文章、某個區塊的開頭 | logo、網站名稱、文章標題與作者 |
<nav> |
主要的導覽連結 | 網站選單、目錄、麵包屑 |
<main> |
這一頁的主要內容，一頁只能有一個（沒有 hidden 的） | 文章、商品列表 |
<article> |
一篇可以單獨存在的內容，拿到別處也看得懂 | 部落格文章、新聞、留言、商品卡 |
<section> |
一個有主題的段落或區塊，通常有自己的標題 | 文章的章節、首頁的「最新消息」區 |
<aside> |
和主要內容相關、但不是主體的補充 | 側欄、相關連結、名詞解釋 |
<footer> |
頁尾，或某篇文章、某個區塊的結尾 | 版權、聯絡方式、文章的發表資訊 |
還有兩個常用的小元素：
<time datetime="2026-09-01">9 月 1 日</time>：標出日期時間，datetime用機器讀得懂的格式。<address>：聯絡資訊（作者或網站的聯絡方式，不是任意的地址）。
article 與 section 怎麼分？ 問自己「這一塊單獨拿出來，例如分享到社群或放進 RSS，看得懂嗎？」看得懂用 article， 只是一篇文章裡的一章用 section。兩者可以互相包：一篇 article 裡分好幾個 section，一個 section 裡列好幾篇 article。
div 與 span 什麼時候用
語意化不是禁止 div。div 和 span 是沒有意義的容器，用在找不到合適語意元素、只是為了加樣式或分組的時候：
| 元素 | 類型 | 用途 |
|---|---|---|
<div> |
區塊（block）：自己佔一整行 | 把幾個元素包成一組來排版，例如一張卡片 |
<span> |
行內（inline）：在一行文字裡 | 把一段文字包起來加樣式，例如標上底色 |
判斷順序：先找有沒有合適的語意元素（強調用 strong、日期用 time、文章用 article），沒有才用 div 或 span。
一個常見錯誤是在段落 p 裡放 div。p 裡只能放行內的內容，瀏覽器遇到 <div> 時會先把段落結束掉，
原本一段話就被拆成好幾塊。下面的練習可以在 DOM 樹看到這個現象。
地標與螢幕閱讀器
螢幕閱讀器的使用者通常不會從頭聽到尾，而是先叫出地標清單（landmarks）或標題清單，再跳到想看的地方，就像你用眼睛掃過頁面一樣。 語意元素本身就帶著「角色」（ARIA role），不必另外寫：
| 元素 | 地標角色 | 什麼時候才算地標 |
|---|---|---|
header |
banner（頁首） | 不在 article、aside、main、nav、section 裡面時 |
nav |
navigation（導覽） | 一定是 |
main |
main（主要內容） | 一定是 |
aside |
complementary（補充內容） | 不在 article、aside、nav、section 裡，或有名稱（aria-label）時 |
footer |
contentinfo（頁尾資訊） | 不在 article、aside、main、nav、section 裡面時 |
section |
region（區域） | 要有名稱（aria-label 或 aria-labelledby）時 |
所以 article 裡的 header（文章開頭的標題與作者）不會變成整頁的「頁首」地標，這正是我們要的；
一般的 section 不會出現在地標清單裡，它的作用是配合標題，讓內容分段。
另外兩個小技巧：
nav只給主要的導覽，頁尾零散的幾個連結不需要都包成 nav。- 一頁有好幾個 nav 時，用
aria-label分開，例如<nav aria-label="主選單">、<nav aria-label="文章目錄">。
小測驗：語意元素與地標
網站最上方的主選單（首頁、最新消息、加入我們）最適合用哪個元素包起來？
一篇 <article> 裡面的 <header>（放文章標題與作者），會成為整頁的 banner（頁首）地標嗎？
一頁最多可以有幾個（沒有 hidden 屬性的）<main>？
只是想把幾個元素包起來，讓 CSS 排成一張卡片，沒有特別的意義。應該用？
標題大綱與搜尋引擎
地標清單之外，螢幕閱讀器使用者最常用的是標題清單：所有 h1～h6 依層級排成一份目錄。 第 3 課的規則在這裡一樣適用，而且更重要：
- 一個 h1：說明這一頁是什麼，通常和
<title>的意思相近。標準允許多個 h1，但一般建議一頁只有一個。 - 不跳級：h2 底下用 h3，不要因為字的大小直接跳到 h4。少了一層時，使用者會以為漏掉了什麼。
- 用 section 包起來不會自動降低標題層級。 早期的規格曾經構想「每個 section 裡都從 h1 開始，瀏覽器會自動算出層級」， 但瀏覽器與螢幕閱讀器從來沒有這樣實作，現在的標準也已經拿掉這個構想。層級一律照你寫的 h 數字。
搜尋引擎也會讀這些結構：標題說明每一段在講什麼，main 與 article 標出主要內容。 語意化本身不是排名的保證，但它讓頁面的內容更容易被正確理解，對使用者與機器都有幫助。
下面的工具是一個 div 湯寫成的社團首頁。它會即時列出地標與標題大綱，並標出問題。
小測驗：標題大綱與改寫
一頁的標題依序是 h1、h2、h4、h2。標題大綱有什麼問題？
下面哪一個內容最適合用 <article>？
<p>請帶 <div>學生證</div> 來報到</p> 在瀏覽器解析後會變成什麼樣子？
重點整理
- 用
header、nav、main、article、section、aside、footer說明每一塊的角色；class 名稱機器讀不懂。 - 沒有合適的語意元素、只是為了樣式或分組時才用
div（區塊）與span（行內）；p裡不能放div。 - 語意元素帶著地標角色：螢幕閱讀器用地標清單跳轉。header、footer 在 article、section 等元素裡不是地標；section 要有名稱才是 region。
- 一頁一個
main、一個h1，標題依層級不跳級；section 不會自動降低標題層級。 - 改寫 div 湯時，畫面通常不會變，變的是瀏覽器、螢幕閱讀器與搜尋引擎看到的結構。
HTML 的部分到這裡告一段落。下一課開始學 CSS：怎麼寫一條規則、顏色與單位的寫法。