HTML footer 標籤語意化誤區解析：全域頁尾、區段結尾與內容模型規範

在檢視前端專案的 HTML 結構時，常會看到兩種極端的使用方式：一種是認為整份網頁只能出現唯一一個 HTML footer 標籤，因而將單篇文章的作者署名、發布日期與全站版權宣告全部混塞在頁面最下方；另一種則是將 <footer> 當成單純的「底部排版容器」，在卡片或彈出視窗內隨意套用，甚至在 <footer> 裡又包了一層 <header>。本文將依據 WHATWG HTML Living Standard 與 W3C HTML-AAM 1.0 規範，深入拆解 <footer> 的語意作用範圍、無障礙角色映射規則，以及與 <address>、<small>、<time> 等子標籤的標準協作方式。

快速索引與文章目錄

• 一、快速索引：全域頁尾與區段頁尾語意分工對照表
• 二、破除「底部裝飾」迷思：HTML footer 標籤的真實語意範疇
• 三、常見語意誤區對比：混塞單一頁尾 vs. 區段與全域職責分離
• 四、HTML footer 標籤的內容模型限制與內部子標籤搭配
• 五、多個 footer 地標的無障礙識別：善用 aria-label
• 六、總結與結構檢核清單

---

一、快速索引：全域頁尾與區段頁尾語意分工對照表

在 HTML 規格中，HTML footer 標籤的語意取決於它最近的祖先區段內容元素（Nearest Ancestor Sectioning Content）；沒有這類祖先時，就是整個 <body> 的頁尾。下表整理了「全域頁尾」與「區段內頁尾」在規範中的核心差異：

比較維度	全域頁尾（Site-wide Footer）	區段內頁尾（Section / Article Footer）
DOM 祖先脈絡	直接隸屬於 <body>（且未包在 <article>、<section>、<nav>、<aside> 或 <main> 內）	位於 <article>、<section>、<aside>、<nav> 或 <main> 內部
W3C HTML-AAM 隱含角色	自動映射為 role="contentinfo"（全站級無障礙資訊地標）	映射為 sectionfooter（WAI-ARIA 1.3 新增，舊版規範為 generic），不是地標，不會出現在地標清單
語意代表範圍	代表整份網頁文件的結尾資訊、版權與全站次要導覽	代表所屬文章或章節的結尾詮釋資料（Metadata）；位於 <main> 內但不在區段元素內時，語意上仍屬 <body> 的頁尾，只是失去 contentinfo 地標
典型搭配子元素	<small>（版權與法律聲明）、<nav>（頁尾導覽連結）、全站 <address>	作者 <address>、發布或更新 <time>、文章分類與標籤清單、上下篇連結
單頁允許數量	建議全頁僅保留 1 個不具名頂層 <footer> 地標，避免地標清單混亂	每個 <article> 或 <section> 皆可各自擁有專屬的區段 <footer>

---

二、破除「底部裝飾」迷思：HTML footer 標籤的真實語意範疇

根據 WHATWG HTML Living Standard 第 4.3.9 節（The footer element） 的定義，<footer> 代表其最近祖先區段內容元素（Sectioning Content：<article>、<aside>、<nav>、<section>）的頁尾；若沒有這類祖先，則代表 <body>，也就是整個頁面的頁尾。

這項規範揭示了兩個常被忽略的重要工程事實：

1. 同一頁面可以合法存在多個 <footer>：就如同 <header> 可以同時作為全站頂部橫幅與單篇文章標頭一樣，<footer> 也可以同時出現在每篇 <article> 的結尾與 <body> 的最底端。
2. 視覺位置不一定只能在最底部：規範明確指出，<footer> 雖然通常放在區段末尾，但在視覺排版甚至 DOM 順序上並不強制只能位於最下方。例如在部落格文章中，若將包含作者簡介與分類標籤的區段 <footer> 透過 CSS Grid 排列在文章左側欄，只要其語意屬於該篇 <article> 的附加元數據，在 HTML 語法上依然完全合法。

圖一：HTML footer 標籤在不同祖先容器下的語意範疇與 W3C HTML-AAM 角色映射流程（圖中區段內 footer 的 generic 為舊版規範（HTML-AAM 1.0，2026-01-29 Working Draft 以前）的映射，現行規範見下方「規範新舊差異」）

釐清螢幕閱讀器的真實行為：contentinfo 與 sectionfooter 的差異

許多網路文章會誤以為「只要寫了 <article><footer>...</footer></article>，螢幕閱讀器就會在地標清單中列出『文章頁尾（Article Footer）』地標」。

事實上，根據 W3C HTML Accessibility API Mappings (HTML-AAM 1.0) 的對應規則：

• 只有當 <footer> 的範圍是 <body>（不是 <article>、<aside>、<main>、<nav> 或 <section> 的後代）時，瀏覽器才會將它映射為 role="contentinfo" 無障礙地標。
• 一旦 <footer> 被包進 <main> 或區段元素內部，隱含角色就改為 WAI-ARIA 1.3 的 sectionfooter（舊版規範為 generic，差異見下一節）。sectionfooter 不是地標角色，因此一個包含 20 篇文章摘要的列表頁不會產生 20 個 contentinfo 地標；WAI-ARIA 也建議作者在一個頁面上最多只標記一個 contentinfo，讓使用者用地標跳轉時能直接抵達全站的底部資訊區。

規範新舊差異：區段內 footer 從 generic 改為 sectionfooter

查資料時常會看到兩種說法，差別在於參考的規範版本：

項目	舊說法	現行說法
區段內 <footer> 的隱含角色	generic（沒有語意的容器角色）	sectionfooter（WAI-ARIA 1.3 新增，不是地標）
依據版本	HTML-AAM 1.0，2022-03-06 起（GitHub PR 364）至 2026-01-29 Working Draft	HTML-AAM 1.0，2026-02-25 Working Draft 起

變更分兩步完成：

1. WAI-ARIA 新增角色：w3c/aria PR 1931（2024-12-11 合併）在 WAI-ARIA 1.3 草案加入 sectionheader 與 sectionfooter，用來表示「屬於某個區段、但不是全站地標」的頁首與頁尾。
2. HTML-AAM 改用新角色：w3c/aria PR 2543（2026-02-25 合併）把 HTML-AAM 中「範圍為 <main> 或區段內容元素」的 <footer> 由 generic 改為映射到 sectionfooter，<header> 同步改為 sectionheader。

兩種說法對「是不是地標」的結論相同：區段內的 <footer> 都不會變成 contentinfo，前文的結構寫法不受影響。實作上要注意兩點：

• 現行 HTML-AAM 允許使用者代理在 <footer> 沒有可及名稱、無法以鍵盤聚焦、也沒有其他會進入無障礙樹的屬性時，不暴露 sectionfooter 角色，因此不同瀏覽器與螢幕閱讀器的呈現可能不同。
• 部分文件（例如 MDN 的 <footer> 頁面）仍寫作 generic，看到時可對照 HTML-AAM 的日期版本判斷是哪一版的說法。

---

三、常見語意誤區對比：混塞單一頁尾 vs. 區段與全域職責分離

以下透過實際的 HTML 結構對比，檢視將文章元數據與全站版權混寫的常見問題，以及標準的語意化重構寫法。

1. 常見錯誤寫法：把文章作者資訊塞進全站頁尾，或將全站頁尾包進 main

<!-- ❌ 常見錯誤寫法：把全域 footer 包進 main 內，且混淆單篇文章與全站資訊 -->
<body>
  <main>
    <article>
      <h1>前端資源載入最佳化實踐</h1>
      <p>文章主體內容...</p>
    </article>

    <!-- 錯誤 1：位於 main 內部的 footer 會失去 role="contentinfo" 全站地標身分 -->
    <!-- 錯誤 2：將單篇文章的作者與發布日期混入全站版權區塊 -->
    <footer>
      <p>本文作者：Sean | 最後更新：2026-10-19</p>
      <p>© 2026 seanacnet.com 版權所有</p>
    </footer>
  </main>
</body>

2. 標準工程寫法：區段內 footer 與頂層全域 footer 各司其職

<!-- ✅ 標準寫法：區段內 footer 封裝文章元數據，頂層 footer 提供全站 contentinfo 地標 -->
<body>
  <header>
    <nav aria-label="主要導覽">...</nav>
  </header>

  <main>
    <article>
      <header>
        <h1>前端資源載入最佳化實踐</h1>
        <p>發布日期：<time datetime="2026-10-19">2026 年 10 月 19 日</time></p>
      </header>

      <p>文章主體內容...</p>

      <!-- 隸屬於 article 的區段結尾（映射為 sectionfooter，不是地標） -->
      <footer>
        <p>分類：<a href="/category/html5-semantics">HTML5 語意與無障礙</a></p>
        <address>
          作者：<a href="/author/sean" rel="author">Sean</a>
        </address>
      </footer>
    </article>
  </main>

  <!-- 直接隸屬於 body 的全站頁尾（映射為 role="contentinfo" 地標） -->
  <footer>
    <nav aria-label="頁尾法規與資訊連結">
      <ul>
        <li><a href="/about">關於本站</a></li>
        <li><a href="/privacy">隱私權政策</a></li>
        <li><a href="/terms">服務條款</a></li>
      </ul>
    </nav>
    <p><small>© 2026 seanacnet.com. All rights reserved.</small></p>
  </footer>
</body>

---

四、HTML footer 標籤的內容模型限制與內部子標籤搭配

在規劃大型頁尾（Fat Footer，例如包含多欄產品連結、電子報訂閱表單與公司資訊的頁尾）時，必須特別留意 HTML footer 標籤的內容模型（Content Model）限制，以及內部子標籤的語意分工。

圖二：HTML footer 內容模型限制與內部語意子元素（small、address、time、nav）分工架構

1. 嚴格禁止的巢狀結構：footer 內不可包含 header 或 footer

根據 WHATWG HTML 標準對 <footer> 內容模型的規定：

Content model: Flow content, but with no header or footer element descendants.

這代表在 <footer> 標籤內部的任何層級，都絕對不能出現 <header> 或另一個 <footer> 後代元素。開發者在實作大型頁尾時，常會不小心在頁尾的電子報訂閱區塊寫出 <header><h3>訂閱技術週報</h3></header>，或是把頁尾分成上下兩層而寫出 <footer>...<footer>版權宣告</footer></footer>，這兩種寫法都會直接觸發 W3C Nu Html Checker 驗證錯誤。若需要在 <footer> 內部標示小區塊標題，直接撰寫 <h2> 或 <h3> 即可，無須外包 <header>。

2. 與 small、address、time 的語意協作

為了讓搜尋引擎與輔助科技更精準解析頁尾資訊，建議在 <footer> 內部善用以下三個原生語意標籤：

• <small>（版權宣告與法律條款細則）：在 HTML5 中，<small> 元素已不再是單純縮小字級的視覺標籤，而是定義為「附註與細則（side comments such as small print）」，規範並說明細則通常包含免責聲明、注意事項、法律限制或版權聲明。因此將 © 2026 ... 包在 <small> 中是最符合規範的做法。
• <address>（作者或網站營運者的聯絡資訊）：根據 WHATWG <address> 規範，<address> 代表最近的 <article> 或 <body> 祖先的聯絡資訊（如客服信箱、官方社群帳號或實體地址），放在 <footer> 內部非常契合。但需注意：若只是在內文中提及某個無關的營業門市地址，而非文件或網站本身的聯絡管道，則不應使用 <address>。
• <time datetime="...">（機器可讀的時間戳記）：在文章區段的 <footer> 標註「最後修訂日期」時，使用 <time datetime="2026-10-26">2026 年 10 月 26 日</time> 能在顯示文字之外提供機器可讀的日期值，方便瀏覽器、輔助工具與爬蟲解析。

---

五、多個 footer 地標的無障礙識別：善用 aria-label

在複雜的企業級網頁設計或單頁應用（SPA）中，有時會因為版面設計或巢狀獨立元件的需求，導致頁面中出現多個具備 role="contentinfo" 的全站級 <footer> 地標（例如頁面頂部因行銷需求嵌入跨站資訊，或複合式佈局中含有獨立的浮動資訊框）。

首選做法仍是合併成一個全站頁尾：WAI-ARIA 規範建議作者在一個頁面上最多只標記一個 contentinfo。若確實無法避免，W3C WAI-ARIA Authoring Practices（APG）的 Landmark Regions 說明指出：同一種地標角色在頁面上出現不只一次時，每一個都要提供唯一的標籤，否則螢幕閱讀器使用者在地標清單中會難以區分各個地標的實際用途。此時可透過 aria-label 或 aria-labelledby 來明確標示區別。

範例：利用 aria-label 區隔多個全站地標

<!-- 全站主要頁尾 -->
<footer aria-label="全站主要頁尾與版權宣告">
  <nav aria-label="頁尾導覽">
    <ul>
      <li><a href="/privacy">隱私權政策</a></li>
      <li><a href="/terms">服務條款</a></li>
    </ul>
  </nav>
  <p><small>© 2026 seanacnet.com. All rights reserved.</small></p>
</footer>

<!-- 巢狀獨立組件或特殊行銷頁尾 -->
<footer aria-label="行銷活動專屬資訊區">
  <p>本活動由合作夥伴贊助，詳細條款請參閱官方說明。</p>
</footer>

透過為每個 <footer> 加上具備描述性的 aria-label 屬性，輔助科技（如 NVDA、VoiceOver）的使用者在叫出地標清單時，就能依名稱分辨「全站主要頁尾與版權宣告」與「行銷活動專屬資訊區」兩個地標（實際唸法依螢幕閱讀器而異）。

---

六、總結與結構檢核清單

在提交前端程式碼前，可透過以下四點快速檢核專案中的 HTML footer 標籤是否符合標準：

1. 頂層地標唯一性：確認全站頁尾 <footer> 直接位於 <body> 底下（或與 <main> 平級的排版容器內），沒有被誤包進 <main> 中導致失去 role="contentinfo" 地標。
2. 區段元數據就近封裝：單篇文章的作者、分類標籤與更新時間應放在 <article> 內部的區段 <footer>，而非混入全站頁尾。
3. 零違規巢狀後代：確認 <footer> 內部沒有任何 <header> 或 <footer> 後代節點。
4. 語意子標籤精準分工：版權宣告搭配 <small>、作者或網站聯絡管道搭配 <address>、重要導覽群組搭配 <nav aria-label="...">。同時，若頁面含有多個地標，務必補上 aria-label 以優化無障礙識別。

參考資料與官方規範延伸閱讀

1. WHATWG HTML Living Standard — The footer element (Section 4.3.9)：官方定義 <footer> 的語意範疇、內容模型限制與多區段使用範例。
2. W3C HTML Accessibility API Mappings (HTML-AAM 1.0) — footer element：規範 <footer> 範圍為 <body> 時映射為 contentinfo、位於 <main> 或區段元素內時映射為 sectionfooter 的判定條件。
3. WHATWG HTML Living Standard — The address element (Section 4.3.10)：說明 <address> 在區段頁尾與全站頁尾中的聯絡資訊語意邊界。
4. WHATWG HTML Living Standard — The small element (Section 4.5.4)：定義 <small> 用於版權宣告與法律附註條款的標準語意。
5. WAI-ARIA 1.3 — sectionfooter role 與 contentinfo role：說明區段頁尾不是地標，以及一個頁面最多標記一個 contentinfo。
6. w3c/aria PR 2543 — Add <header> (sectionheader) and <footer> (sectionfooter) html-aam mappings：HTML-AAM 將區段內 <footer> 由 generic 改為 sectionfooter 的變更（2026-02-25 合併）。
7. W3C WAI-ARIA Authoring Practices — Landmark Regions：同類地標重複出現時須提供唯一標籤的建議。
8. MDN Web Docs — <footer>: The Footer element：整理 <footer> 的無障礙考量與瀏覽器實作說明。

• 延伸閱讀：HTML 語意化標籤整理：header、nav、main、article、section、aside 與 footer 架構解析
• 延伸閱讀：什麼是 DOM Tree？解析瀏覽器渲染機制與 Reflow / Repaint 效能優化實作