header、nav、main、footer：地標元素與網頁結構訊號
地標元素（Landmark）是一組用來標示 版面角色 的標籤。它們回答的是「哪一段是主要內容、哪一段是導覽、哪一段是附註」，這也是 語意化 HTML 最直接的價值。
五個地標元素
| 元素 | 角色 | 一頁幾個 |
|---|---|---|
<header> | 頁首或區塊的檔頭 | 多個 |
<nav> | 主要的導覽連結區 | 多個 |
<main> | 這一頁的主要內容 | 只能一個 |
<aside> | 與主內容相關但可獨立的附註 | 多個 |
<footer> | 頁尾或區塊的結尾 | 多個 |
main 只能一個
這是硬性規定，不是建議
規格規定一頁只能有 一個可見的 <main>。理由很直接：它的意義就是「這一頁的主要內容在這裡」，有兩個就沒有意義了。
<!-- 錯誤：兩個 main -->
<main class="article">...</main>
<main class="sidebar">...</main>
<!-- 正確 -->
<main>...</main>
<aside>...</aside>分頁式介面（Tab）常讓人想用多個 <main>。正確做法是把切換的區塊放在 同一個 <main> 裡：
<main>
<div role="tabpanel" aria-labelledby="tab-1">第一個分頁的內容</div>
<div role="tabpanel" aria-labelledby="tab-2" hidden>第二個分頁的內容</div>
</main>main 是最值得優先做的一個
如果只加一個地標元素，就加 <main>。它直接回答了「哪一段是主要內容」，讓搜尋引擎不必靠文字量比例去猜。
header 與 footer 不只在最外層
這兩個是 相對於所在區塊 的，不是專屬於整頁：
<body>
<header>
<!-- 這是整頁的頁首 -->
<img src="/logo.svg" alt="網站標誌">
</header>
<main>
<article>
<header>
<!-- 這是這篇文章的檔頭 -->
<h1>文章標題</h1>
<p>發佈於 2026-09-07</p>
</header>
<p>內文……</p>
<footer>
<!-- 這是這篇文章的結尾資訊 -->
<p>作者：Away</p>
</footer>
</article>
</main>
<footer>
<!-- 這是整頁的頁尾 -->
<p>Copyright © 2026</p>
</footer>
</body>放在 body 直屬層時才是「整頁的」
<header> 與 <footer> 只有直接放在 <body> 下（或者說不在 <article>、<section>、<aside>、<nav> 裡）時，才被視為整頁的頁首與頁尾地標。
nav 該包哪些
不要把所有連結區都包起來
<nav> 是給 主要的導覽區塊 用的。全部包起來反而讓地標失去指向性，螢幕閱讀器的地標清單裡出現十個「導覽」，使用者根本不知道該進哪一個。
| 該包 | 不該包 |
|---|---|
| 全站主選單 | 內文中零散的連結 |
| 分類或側邊選單 | 單一的「返回列表」連結 |
| 麵包屑 | 社群分享按鈕 |
| 分頁導覽 | 頁尾的版權連結 |
| 文章內的目錄 | 「延伸閱讀」卡片區（除非它是主要導覽） |
多組 nav 要取名
一頁有多組導覽時，用 aria-label 給每一組取名：
<nav aria-label="主要導覽">
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/products">商品</a></li>
</ul>
</nav>
<nav aria-label="麵包屑">
<ol>
<li><a href="/">首頁</a></li>
<li><a href="/products">商品</a></li>
<li aria-current="page">無線滑鼠</li>
</ol>
</nav>
<nav aria-label="分頁導覽">
<a href="?page=2">2</a>
</nav>名稱不要包含「導覽」二字
螢幕閱讀器會念成「主要導覽 導覽區塊」，重複了。寫 aria-label="主要" 或 aria-label="麵包屑" 就好。
不過中文語境下寫「主要導覽」可讀性較好，兩種寫法都可接受，重點是 每一組的名稱不同。
article 還是 section
這是最容易猶豫的一組。判斷標準只有一句話：
| 內容 | 用哪個 | 為什麼 |
|---|---|---|
| 一篇部落格文章 | <article> | 單獨看得懂 |
| 一則使用者留言 | <article> | 單獨看得懂 |
| 一張商品卡片 | <article> | 單獨看得懂 |
| 文章裡的「常見問題」章節 | <section> | 需要上下文 |
| 首頁的「最新消息」區塊 | <section> | 需要上下文 |
兩者都需要自己的標題
<section> 與 <article> 沒有標題時，它們對大綱就沒有貢獻，那和用 <div> 沒有差別。
<!-- 沒有標題，等於白包一層 -->
<section>
<p>一些內容</p>
</section>
<!-- 有標題，對大綱有貢獻 -->
<section>
<h2>常見問題</h2>
<p>一些內容</p>
</section>純粹為了排版與樣式而包的容器，用 <div> 才對。
aside 的判斷
<aside> 是「與主內容相關，但抽走也不影響主內容完整性」的部分：
| 適合 | 不適合 |
|---|---|
| 側邊欄的推薦文章 | 文章的主要內容 |
| 補充說明的方框 | 只是視覺上在旁邊的裝飾 |
| 廣告區塊 | 主要的導覽選單（用 <nav>） |
| 名詞解釋 | 頁尾資訊（用 <footer>） |
一份完整的骨架
<body>
<header>
<a href="/"><img src="/logo.svg" alt="網站標誌"></a>
<nav aria-label="主要導覽">
<ul>
<li><a href="/products">商品</a></li>
<li><a href="/about">關於</a></li>
</ul>
</nav>
</header>
<nav aria-label="麵包屑">
<ol>
<li><a href="/">首頁</a></li>
<li aria-current="page">文章標題</li>
</ol>
</nav>
<main>
<article>
<header>
<h1>文章標題</h1>
</header>
<p>導言……</p>
<section>
<h2>第一節</h2>
<p>內容……</p>
</section>
<section>
<h2>常見問題</h2>
</section>
</article>
</main>
<aside>
<h2>熱門文章</h2>
<ul>
<li><a href="/a">文章 A</a></li>
</ul>
</aside>
<footer>
<p>Copyright © 2026</p>
</footer>
</body>對無障礙的作用
地標元素同時是螢幕閱讀器的 跳段導航 依據。使用者可以直接跳到「主要內容」而不必聽完整個導覽選單。
這是和 SEO 高度重疊的部分
搜尋引擎需要知道「哪一段是主內容」，螢幕閱讀器使用者也需要。做好一邊通常另一邊跟著改善，細節見 無障礙與 SEO 的交集 。
檢查清單
| 項目 | 標準 |
|---|---|
主要內容包在 <main> 裡 | 建議 |
一頁只有一個 <main> | 必備 |
主選單包在 <nav> 裡 | 建議 |
多組 <nav> 各有 aria-label | 建議 |
沒有把零散連結都包成 <nav> | 建議 |
<section> 與 <article> 都有標題 | 建議 |
純排版用的容器是 <div> | 建議 |
常見問題
地標元素對排名有直接幫助嗎？
沒有直接的加分，但它讓搜尋引擎不必猜哪一段是主要內容。猜錯的後果很具體：側邊欄的推薦文章被當成主內容，摘要就抓錯段落；頁尾的版權宣告被當成內文，頁面主題就模糊掉。
main 一頁真的只能有一個嗎？
規格規定一頁只能有一個可見的主內容元素。這是硬性限制而不是建議，因為它的意義就是「這一頁的主要內容在這裡」，有兩個就沒有意義了。多個分頁式介面應該把切換的區塊放在同一個主內容元素裡。
article 和 section 該怎麼選？
判斷標準是這段內容單獨拿出來還有沒有意義。一篇文章、一則留言、一張商品卡片單獨看得懂，用 <article> ；文章裡的某一章節必須放在上下文中才有意義，用 <section> 。兩者都需要自己的標題。
一頁可以有幾個 nav？
可以有多個，例如：主導覽、麵包屑、頁尾導覽。這時要用 aria-label 給每一組取名，否則螢幕閱讀器的地標清單裡會出現好幾個都叫導覽的項目，使用者無法分辨。
所有連結區都要包在 nav 裡嗎？
不用。導覽元素是給主要的導覽區塊用的，例如：全站選單、分類選單、麵包屑。內文中零散的連結、單一的返回連結、社群分享按鈕都不必包，全部包起來反而讓地標失去指向性。
延伸閱讀
參考資料：MDN：aria 地標角色