3. 標題 (Headings)

By /

HTML 標題用來標示網頁及章節的題目，協助讀者了解內容的組織方式，也讓輔助技術可以按標題導覽網頁。

HTML 提供六個標題層級：

<h1>主要標題</h1>
<h2>章節標題</h2>
<h3>子章節標題</h3>
<h4>第四層標題</h4>
<h5>第五層標題</h5>
<h6>第六層標題</h6>

應按內容層級選擇標題元素，而不是按想要的字體大小選擇。

3.1 標題的意義

元素一般用途
<h1>網頁的主要標題
<h2>主要章節
<h3><h2> 章節內的子章節
<h4><h3> 章節內的子章節
<h5>更深入的細分章節
<h6>可用的最深標題層級

例如：

<h1>香港旅遊指南</h1>

<h2>交通</h2>
<h3>鐵路服務</h3>
<h3>渡輪服務</h3>

<h2>遊覽地點</h2>
<h3>博物館</h3>
<h3>郊野公園</h3>

「交通」和「遊覽地點」是同一層級的章節，各自的子章節使用 <h3>。

你不需要使用全部六個層級。

3.2 標題不只是較大的文字

這是一個標題：

<h2>課程要求</h2>

以下則是外觀像標題的段落：

<p style="font-size: 1.5rem; font-weight: bold;">
  課程要求
</p>

兩者可能看起來相似，但段落不會提供原生的標題語意。

同樣地，<strong> 表示內容的重要性，不會將文字變成標題。

應使用：

  • HTML 表達結構。
  • CSS 控制外觀。

3.3 建立清晰的標題層級

實用的做法是先將網頁規劃成大綱：

網頁標題
├── 關於課程
├── 課程內容
│   ├── HTML 基礎
│   └── 實習練習
└── 報名

再將大綱轉換成標題層級：

<h1>網頁開發入門</h1>

<h2>關於課程</h2>

<h2>課程內容</h2>
<h3>HTML 基礎</h3>
<h3>實習練習</h3>

<h2>報名</h2>

避免不必要地跳過層級

較不清晰：

<h1>課程指南</h1>
<h3>入讀要求</h3>

較好的做法：

<h1>課程指南</h1>
<h2>入讀要求</h2>

跳過層級本身不一定是語法錯誤，但可能令內容結構較難理解。

由子章節返回較高層級的章節是正常的：

<h2>課程內容</h2>
<h3>HTML 基礎</h3>
<h3>CSS 基礎</h3>
<h2>報名</h2>

最後的 <h2> 表示開始另一個主要章節。

3.4 應使用多少個 <h1>？

對一般網頁而言，以一個清晰的 <h1> 標示主要內容，是實用的預設做法。

<h1>HTML 入門課程</h1>

不要只為了讓多個標題顯得較大，就使用多個 <h1>。

HTML 並沒有適用於所有文件情況的「必須剛好有一個 <h1>」通用規則。不過，明確而一致的層級通常更容易維護和導覽。

章節不會自動重設標題層級

不要假設將 <h1> 放在 <section> 內，它就會變成第二層標題：

<h1>課程指南</h1>

<section>
  <h1>課程內容</h1>
</section>

輔助技術一般仍會將這兩個標題識別為第一層標題。

應明確使用合適的層級：

<h1>課程指南</h1>

<section>
  <h2>課程內容</h2>
</section>

3.5 標題與無障礙使用

許多螢幕閱讀器讓使用者可以：

  • 列出網頁上的標題。
  • 跳至下一個或上一個標題。
  • 按標題層級導覽。

清晰的標題能讓這些功能更有用。

具描述性的標題：

<h2>申請截止日期</h2>

資訊較少的標題：

<h2>更多資訊</h2>

第二個標題在某些情況下可能合適，但具描述性的標題通常更能清楚表達章節用途。

使用原生標題元素

優先使用：

<h2>聯絡資料</h2>

而不是：

<div role="heading" aria-level="2">聯絡資料</div>

有需要時，ARIA 可以提供標題語意，但原生 HTML 更簡單，也不需要另行設定標題層級屬性。

不要為一般 <h1> 至 <h6> 元素加入多餘的 role="heading" 或 aria-level。

3.6 標題與文件名稱

<title> 和 <h1> 有關聯，但用途不同：

<head>
  <title>HTML 入門課程 | 香港學習中心</title>
</head>
<body>
  <h1>HTML 入門課程</h1>
</body>
元素用途
<title>設定文件名稱，通常顯示在瀏覽器分頁上
<h1>在網頁內提供可見的主要標題

兩者可以使用相似文字，但不必完全相同。

標題有助於表達內容結構，但增加標題數量或重複關鍵字，不會保證改善搜尋排名。

3.7 標題的語言設定

標題會繼承包含它的元素所設定的語言。

香港英文

<html lang="en-HK">

這份文件內的標題一般會繼承英文設定：

<h1>Welcome to Our Learning Centre</h1>

中文標題可以另行指定語言：

<h2 lang="zh-Hant-HK">課程內容</h2>

雙語標題

<h1>
  Course Guide
  <span lang="zh-Hant-HK">課程指南</span>
</h1>

在主要語言為英文的文件中，這仍是一個包含兩種語言文字的標題。

一般英文可使用 lang="en"，香港語境的英文可使用 lang="en-HK"，香港繁體中文則可使用 lang="zh-Hant-HK"。

標題層級不會因語言而改變。

3.8 使用 CSS 設定標題外觀

你可以改變標題外觀，而不改變它的語意層級：

<h2 class="section-heading">課程內容</h2>
.section-heading {
  color: #005ea8;
  font-size: 1.75rem;
  line-height: 1.3;
  margin-block-start: 2rem;
  margin-block-end: 0.75rem;
}

外觀看起來較小的 <h1>，仍然是第一層標題。外觀看起來較大的 <h3>，仍然是第三層標題。

避免設定固定高度，以免標題換行或使用者放大文字時，內容被裁切。

3.9 連結至標題

使用 id 可以將標題設為頁內連結的目的地：

<a href="#entry-requirements">跳至入讀要求</a>

<h2 id="entry-requirements">入讀要求</h2>
<p>不需要具備網頁開發經驗。</p>

片段識別碼 #entry-requirements 指向具有該 id 的元素。

請注意：

  • 每個 id 必須在同一文件內保持唯一。
  • 使用有意義的連結文字。
  • 片段連結通常會捲動至目的地，但不要假設所有瀏覽器都會以相同方式移動鍵盤焦點。

3.10 完整範例：課程網頁

以下中文版範例使用一個主要標題、兩個主要章節標題，以及兩個子章節標題。

主要語言設定為香港繁體中文。CSS 控制外觀，但不改變標題層級。

id: hong-kong-html-headings
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>
      * {
        box-sizing: border-box;
      }

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

      main {
        max-width: 46rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

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

      h1 {
        font-size: 2.25rem;
        margin-block: 0 1rem;
      }

      h2 {
        font-size: 1.75rem;
        margin-block: 0 1rem;
      }

      h3 {
        font-size: 1.25rem;
        margin-block: 1.5rem 0.5rem;
      }

      section {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

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

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

      .welcome {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>HTML 入門課程</h1>
      <p>開始學習如何建立結構清晰、無障礙的網頁。</p>

      <p class="welcome" lang="en-HK">
        Welcome to the HTML beginner course.
      </p>

      <nav aria-label="本頁目錄">
        <ul>
          <li><a href="#course-content">課程內容</a></li>
          <li><a href="#entry-requirements">入讀要求</a></li>
        </ul>
      </nav>

      <section>
        <h2 id="course-content">課程內容</h2>
        <p>本課程介紹 HTML 的基礎知識。</p>

        <h3>文件結構</h3>
        <p>
          認識文件類型宣告、文件語言、
          中繼資料及主體內容。
        </p>

        <h3>標題與段落</h3>
        <p>
          使用有意義的標題及清晰的段落，
          有條理地組織資訊。
        </p>
      </section>

      <section>
        <h2 id="entry-requirements">入讀要求</h2>
        <p>不需要具備網頁開發經驗。</p>
        <ul>
          <li>基本電腦操作能力</li>
          <li>純文字或程式碼編輯器</li>
          <li>現代網頁瀏覽器</li>
        </ul>
      </section>
    </main>
  </body>
  </html>

標題大綱如下：

h1：HTML 入門課程
├── h2：課程內容
│   ├── h3：文件結構
│   └── h3：標題與段落
└── h2：入讀要求

導覽區的標籤用來為導覽區命名，不是額外的標題。

3.11 常見錯誤

錯誤較好的做法
按字體大小選擇標題層級按結構選擇層級，再使用 CSS 設定外觀
用加粗段落代替章節標題使用原生標題元素
沒有結構上的理由便跳過層級保持清晰的層級
假設 <section> 會重設標題層級明確設定正確層級
將每一行短文字都設為標題只用標題標示網頁及章節題目
留下空白標題提供有意義的標題文字
將一個標題放在另一個標題內將標題元素分開
將標題放在 <p> 內先結束段落，再加入標題
多個標題重複使用同一個 id為每個連結目的地設定唯一的 id
將 <title> 當作可見的網頁主標題在 <body> 內加入合適的標題

本章總結： 標題表達網頁的內容結構。按內容層級使用 <h1> 至 <h6>，撰寫具描述性的標題文字，並以 CSS 控制外觀，而不是為了外觀改變語意層級。

相關文章

Scroll to Top