<h1>–<h6>：HTML 章節標題元素

這些元素僅包括全域屬性。

• 標題信息可供用戶代理自動構建文件的目錄。
• 不要使用標題元素調整文本大小。而應使用 CSS 的 font-size 屬性。
• 不要跳過標題級別：始終從 <h1> 開始，然後是 <h2> 等等。

雖然 HTML 標準允許在一個頁面上使用多個 <h1> 元素（只要它們不是嵌套的），但這不被認為是最佳實踐。一個頁面通常應該只有一個 <h1> 元素，用於描述頁面的內容（類似於文件的 <title> 元素）。

請優先使用每頁僅有一個 <h1>，並且嵌套標題而不跳級。

以下代碼展示了所有標題級別的使用。

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

以下代碼展示了一些帶有內容的標題。

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

對於使用螢幕閱讀軟體的用戶來說，一種常見的導航技術是快速跳轉到各個標題以自動確定頁面的內容。因此，不要跳過一個或多個標題級別是很重要的。這樣做可能會造成混淆，因為以這種方式導航的人可能會想知道缺失的標題在哪裡。

不要這樣做：

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

請這樣做：

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

嵌套

標題可以嵌套為子節以反映頁面內容的組織結構。大多數螢幕閱讀器也可以生成頁面上所有標題的有序列表，這可以幫助人們快速確定內容的層次結構：

1. h1 甲蟲

   1. h2 語源

   2. h2 分佈與多樣性

   3. h2 進化

      1. h3 晚古生代
      2. h3 侏羅紀
      3. h3 白堊紀
      4. h3 新生代

   4. h2 外部形態

      1. h3 頭部

         1. h4 口器

      2. h3 胸部

         1. h4 前胸
         2. h4 中胸

      3. h3 腿部

      4. h3 翅膀

      5. h3 腹部

當標題嵌套時，關閉子節時可能會「跳過」標題級別。

• 標題 • 頁面結構 • WAI Web 無障礙教學
• MDN 了解 WCAG，第 1.3 條解釋
• 理解成功標準 1.3.1 | W3C 了解 WCAG 2.0
• MDN 了解 WCAG，第 2.4 條解釋
• 理解成功標準 2.4.1 | W3C 了解 WCAG 2.0
• 理解成功標準 2.4.6 | W3C 了解 WCAG 2.0
• 理解成功標準 2.4.10 | W3C 了解 WCAG 2.0

另一種螢幕閱讀軟體用戶常見的導航技術是生成章節內容的列表並用它來確定頁面的佈局。

可以使用 aria-labelledby 和 id 屬性的組合為章節內容進行標記，標籤簡要描述章節內容的目的。此技術適用於同一頁面上有多個章節元素的情況。

章節內容範例

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

在這個例子中，螢幕閱讀技術會宣佈有兩個 nav 章節，一個叫「主導航」，一個叫「頁腳導航」。如果沒有提供標籤，使用螢幕閱讀軟體的人可能需要調查每個 nav 元素的內容來確定它們的目的。

• 使用 aria-labelledby 屬性
• 標記區域 • 頁面結構 • W3C WAI Web Accessibility Tutorials

• <p>
• <div>
• <section>