20. 區段元素 (Sectioning Elements)

By /

HTML 提供語意元素，描述文件內容如何組織。

這些元素幫助讀者、開發者及輔助技術理解網頁不同部分的用途。

<main>
  <article>
    <h1>開始學習 HTML</h1>

    <section>
      <h2>建立第一個檔案</h2>
      <p>將純文字文件儲存為 index.html。</p>
    </section>
  </article>
</main>

按內容用途選擇結構元素，而不是按外觀選擇。 CSS 控制版面，語意化 HTML 則描述意義。

20.1 區段內容與相關元素

四個 HTML 元素屬於**區段內容（sectioning content）**類別：

元素用途
<section>具有共同主題的內容群組
<article>可以獨立理解的完整內容
<nav>包含主要導覽連結的區段
<aside>與周圍內容間接相關的補充內容

其他元素也支援網頁結構，但技術上不屬於區段內容：

元素用途
<main>文件的主要內容
<header>介紹內容或導覽輔助資訊
<footer>網頁或區段的頁尾資料
<div>沒有特定語意用途的通用容器

討論 HTML 類別時，這個分別很重要。不過，以上元素都能幫助建立組織清晰的網頁。

20.2 <section> 元素

<section> 將具有共同主題的內容組合起來：

<section>
  <h2>入讀要求</h2>
  <p>不需要任何網頁開發經驗。</p>
</section>

區段通常應有標題，識別其主題。

適合的用途包括：

  • 課程要求。
  • 學習成果。
  • 授課安排。
  • 指南中的相關階段。

不要只為增加內邊距或將內容排列成多欄，就使用 <section>：

<!-- 通用版面群組更適合使用 div。 -->
<div class="two-column-layout">
  <!-- 內容 -->
</div>

可以問自己：這組內容是否具有值得用標題識別的主題？ 如果沒有，<div> 可能更合適。

20.3 <article> 元素

<article> 表示可以獨立理解，而且可以合理地單獨重用或發布的完整內容。

例子包括：

  • 新聞報道。
  • 網誌文章。
  • 討論區帖子。
  • 使用者留言。
  • 獨立產品或課程介紹。
<article>
  <h2>HTML 入門</h2>
  <p>介紹有意義的網頁結構的入門課程。</p>
  <p>時數：3 小時。</p>
</article>

文章可以包含區段：

<article>
  <h1>HTML 入門課程指南</h1>

  <section>
    <h2>學習成果</h2>
    <p>學習建立文字、連結、清單及表格的結構。</p>
  </section>

  <section>
    <h2>評核方式</h2>
    <p>建立一個具備無障礙功能的小型網頁。</p>
  </section>
</article>

如果具有合理關係，文章也可以包含其他文章，例如網誌文章中的相關留言。

不是每張視覺卡片都應使用 <article>。應因內容可以獨立理解而選擇它，而不是因為內容有框線。

20.4 <section> 與 <article> 的分別

兩者都組合有意義的內容，但回答不同問題：

問題通常適合的元素
這是否是較大內容中具有共同主題的一部分？<section>
這是否是可以獨立理解的完整內容？<article>
這是否只是樣式或版面容器？<div>

例如：

  • 課程指南中的「入讀要求」是區段。
  • 完整的課程介紹可以是文章。
  • 包含多個課程介紹的網格可以是通用容器。

選擇取決於語境。不是每個內容群組都只有一個必須使用的元素。

20.5 <nav> 元素

主要導覽區塊應使用 <nav>：

<nav aria-label="主要導覽">
  <ul>
    <li><a href="index.html">首頁</a></li>
    <li><a href="courses.html">課程</a></li>
    <li><a href="contact.html">聯絡我們</a></li>
  </ul>
</nav>

常見用途包括：

  • 網站主要導覽。
  • 目錄。
  • 網頁內的重要導覽。
  • 麵包屑導覽。

不是每組連結都需要 <nav>。段落或文章頁尾中的少量參考連結，可以保留為一般連結。

網頁具有多個導覽地標時，應提供可區分的名稱：

<nav aria-label="主要導覽">
  <!-- 網站連結 -->
</nav>

<nav aria-label="本頁目錄">
  <!-- 區段連結 -->
</nav>

通常不需要為 <nav> 加入 role="navigation"，因為它本身已提供該角色。

20.6 <aside> 元素

<aside> 包含與周圍內容間接相關的補充資料：

<aside aria-labelledby="practice-tip">
  <h2 id="practice-tip">練習提示</h2>
  <p>使用瀏覽器開發者工具檢查網頁結構。</p>
</aside>

可能用途包括：

  • 補充說明。
  • 相關資源。
  • 背景資料。
  • 摘錄引文。
  • 與網頁語境相關的廣告。

<aside> 不一定是視覺上的側欄。CSS 可以將它放在主要內容旁邊、上方或下方。

不要只因設計將內容放在側邊，就把重要指引放在 <aside>。必要資料應保留在相關內容的主要閱讀流程中。

20.7 <main> 元素

<main> 識別文件的主要內容：

<main id="main-content">
  <h1>課程指南</h1>
  <p>探索可供選擇的學習機會。</p>
</main>

它通常不包含在整個網站重複出現的資料，例如主要導覽及網站頁尾。

一般網頁應使用一個可見的 <main>。文件不能包含多於一個沒有 hidden 屬性的 <main>。

<main> 不能是 <article>、<aside>、<footer>、<header> 或 <nav> 的後代元素。

它可以包含文章、區段及其他內容。

跳至主要內容的連結可以提供直接存取：

<a href="#main-content">跳至主要內容</a>

主要內容之前有重複導覽時，這種連結尤其有用。

20.8 <header> 元素

<header> 包含網頁或相關區段的介紹內容及導覽輔助資訊。

網頁頁首

<header>
  <p class="site-name">學習中心</p>
  <nav aria-label="主要導覽">
    <!-- 網站導覽 -->
  </nav>
</header>

文章頁首

<article>
  <header>
    <h2>HTML 工作坊公布</h2>
    <p>
      發布日期：
      <time datetime="2026-10-14">2026 年 10 月 14 日</time>
    </p>
  </header>

  <p>工作坊介紹具備無障礙功能的網頁結構。</p>
</article>

網頁可以有多個 <header>，分別服務不同內容。

<header> 與 <head> 不同：

  • <head> 包含文件中繼資料及資源參照。
  • <header> 是網頁內容的一部分。

頁首不一定要位於可視區域頂部，也不會自動在捲動時保持固定。

20.9 <footer> 元素

<footer> 包含網頁或相關區段的頁尾資料。

<footer>
  <p>© 2026 範例學習中心。</p>
  <a href="privacy.html">私隱資料</a>
</footer>

文章可以有自己的頁尾：

<article>
  <h2>HTML 入門</h2>
  <p>實用的網頁結構入門介紹。</p>

  <footer>
    <p>由教學團隊編製。</p>
  </footer>
</article>

頁尾內容可以包括：

  • 作者資料。
  • 版權資料。
  • 相關連結。
  • 相關聯絡資料。

頁尾不會自動出現在螢幕底部。其位置由文件流及 CSS 控制。

20.10 標題與文件層級

使用標題級別表達內容層級：

<h1>HTML 課程指南</h1>

<section>
  <h2>學習成果</h2>

  <section>
    <h3>處理文字</h3>
    <p>適當使用標題、段落及清單。</p>
  </section>
</section>

實用的結構是：

  • <h1>：網頁主要主題。
  • <h2>：主要分部。
  • <h3>：次級分部。
  • 按需要使用更低級別。

不要假設嵌套區段會自動調整標題級別。 瀏覽器及輔助技術不會根據區段嵌套，提供可靠的自動文件大綱。

應明確選擇標題級別，並使用 CSS 控制視覺大小。

嵌入網頁的文章不會自動需要自己的 <h1>。

20.11 地標與無障礙名稱

語意結構可以為輔助技術提供導覽地標。

常見對應包括：

HTML 元素常見無障礙角色
<main>主要內容（main）
<nav>導覽（navigation）
<aside>補充內容（complementary）
網頁層級的 <header>頁首橫幅（banner）
網頁層級的 <footer>內容資訊（contentinfo）
具有無障礙名稱的 <section>區域（region）
<article>文章（article），而不是標準地標

頁首及頁尾的對應取決於所在語境。文章或區段內的頁首及頁尾，通常不會成為整個網頁的橫幅或內容資訊地標。

區段標題本身不會自動為區段提供無障礙名稱。需要具名區域時，可以參照標題：

<section aria-labelledby="requirements-heading">
  <h2 id="requirements-heading">入讀要求</h2>
  <p>不需要任何相關經驗。</p>
</section>

不要將每個小型群組都標示為區域。過多地標可能令導覽變得繁雜。

應優先使用原生元素，而不是具有多餘 ARIA 角色的通用容器：

<main>
  <!-- 主要內容 -->
</main>

而不是：

<div role="main">
  <!-- 主要內容 -->
</div>

20.12 完整範例：結構清晰的課程指南

以下獨立網頁結合網頁頁首、主要導覽、主要內容、包含區段的文章、補充資料及網頁頁尾。

CSS 調整版面，但不改變內容意義或原始碼次序。

id: hong-kong-html-sectioning-elements
name: 區段元素 — 結構清晰的課程指南
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>區段元素 | HTML 課程指南</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      .site-header,
      .site-footer {
        padding: 1.25rem;
        background: white;
      }

      .site-header {
        border-block-end: 1px solid #767676;
      }

      .site-footer {
        border-block-start: 1px solid #767676;
      }

      .site-inner,
      main {
        max-width: 60rem;
        margin-inline: auto;
      }

      .site-name {
        margin-block: 0 0.75rem;
        color: #005ea8;
        font-size: 1.25rem;
        font-weight: 700;
      }

      nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      main {
        padding: 2rem 1rem;
      }

      .content-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
      }

      .course-guide,
      .practice-note {
        min-width: 0;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
        overflow-wrap: anywhere;
      }

      h1,
      h2,
      h3 {
        color: #005ea8;
        line-height: 1.4;
      }

      h1 {
        margin-block-start: 0;
        font-size: 2rem;
      }

      .course-guide section {
        margin-block-start: 2rem;
      }

      .article-footer {
        margin-block-start: 2rem;
        padding-block-start: 1rem;
        border-block-start: 1px solid #767676;
      }

      .practice-note {
        background: #eaf2f8;
      }

      .practice-note h2 {
        margin-block-start: 0;
      }

      a {
        color: #005ea8;
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      :focus-visible {
        outline: 3px solid #005ea8;
        outline-offset: 4px;
      }

      .skip-link {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 10;
        padding: 0.75rem 1rem;
        border: 2px solid #005ea8;
        background: white;
        transform: translateY(-200%);
      }

      .skip-link:focus {
        transform: translateY(0);
      }

      [id] {
        scroll-margin-block-start: 1rem;
      }

      @media (min-width: 52rem) {
        .content-layout {
          grid-template-columns:
            minmax(0, 2fr) minmax(0, 1fr);
        }
      }
    </style>
  </head>
  <body>
    <a class="skip-link" href="#main-content">
      跳至主要內容
    </a>

    <header class="site-header">
      <div class="site-inner">
        <p class="site-name">範例學習中心</p>
        <nav aria-label="主要導覽">
          <ul>
            <li><a href="#course-title">課程指南</a></li>
            <li><a href="#learning-outcomes">學習成果</a></li>
            <li><a href="#entry-requirements">入讀要求</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <main id="main-content" tabindex="-1">
      <!-- 這個 div 控制版面，不增加特定內容角色。 -->
      <div class="content-layout">
        <article class="course-guide" aria-labelledby="course-title">
          <header>
            <h1 id="course-title">HTML 基礎</h1>
            <p>
              這個虛構入門課程介紹有意義、
              具備無障礙功能的網頁結構。
            </p>
          </header>

          <section>
            <h2 id="learning-outcomes">學習成果</h2>
            <p>完成課程後，學員可以：</p>
            <ul>
              <li>使用標題及段落組織內容。</li>
              <li>建立連結、清單及無障礙圖片。</li>
              <li>選擇適當的表單及結構元素。</li>
            </ul>

            <section>
              <h3>實習練習</h3>
              <p>
                建立小型課程資料網頁，
                並使用合理的標題層級。
              </p>
            </section>
          </section>

          <section>
            <h2 id="entry-requirements">入讀要求</h2>
            <p>
              不需要任何開發經驗。
              請準備程式碼編輯器及現代瀏覽器。
            </p>
          </section>

          <footer class="article-footer">
            <p>
              本頁是 HTML 教學範例，
              不提供實際課程報名。
            </p>
          </footer>
        </article>

        <aside class="practice-note" aria-labelledby="practice-heading">
          <h2 id="practice-heading">練習提示</h2>
          <p>
            使用瀏覽器的無障礙工具，
            檢查網頁標題及地標。
          </p>
          <p>
            語意元素描述內容用途；CSS 則控制外觀及版面。
            側欄位置本身不代表內容一定要使用 aside。
          </p>
        </aside>
      </div>
    </main>

    <footer class="site-footer">
      <div class="site-inner">
        <p>© 2026 範例學習中心。</p>
        <p><a href="#main-content">返回主要內容</a></p>
      </div>
    </footer>
  </body>
  </html>

在這個範例中：

  • 網頁層級的頁首及頁尾提供網站背景。
  • 導覽具有清晰的無障礙名稱。
  • 跳過導覽連結通往主要內容。
  • 文章包含具共同主題的區段，並明確設定標題級別。
  • <aside> 包含補充資料，而不是必要指引。
  • 通用 <div> 管理兩欄版面。
  • 文章的頁首及頁尾服務該文章，而不是整個網頁。
  • 沒有 JavaScript 時，網頁仍然可用。

20.13 常見錯誤

錯誤較好的做法
將所有結構元素都稱為「區段內容」區分四個區段元素與其他相關元素
只為設定樣式而使用 <section>通用版面群組使用 <div>
因內容看似卡片而使用 <article>檢查內容是否可以獨立理解
所有連結群組都使用 <nav>保留給主要導覽區塊
將 <aside> 視為「右欄」的同義詞按內容關係選擇
混淆 <header> 與 <head>區分網頁內容與文件中繼資料
以為 <footer> 會固定在可視區域底部使用 CSS 控制位置
以為嵌套區段會修正標題級別明確選擇標題級別
建立多個可見的 <main>使用一個主要內容區域
為原生元素加入多餘角色按需要依靠內建語意
將每個小型區段都命名為地標保持地標導覽實用及簡潔

本章總結： 使用 <section>、<article>、<nav> 和 <aside> 描述有意義的內容群組。配合 <main>、<header> 及 <footer>，維持清晰的標題層級；如果只需要通用容器，則使用 <div>。

相關文章

Scroll to Top