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

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

• 使用者代理可以使用標題資訊自動構建文件的目錄。
• 不要使用標題元素來調整文字大小。請改用 CSS 的 font-size 屬性。
• 不要跳過標題級別：始終從 <h1> 開始，然後是 <h2>，依此類推。

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

建議每個頁面只使用一個<h1>，並且巢狀標題時不要跳過級別。

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

不要這樣做

<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 可訪問性教程

以下程式碼顯示了所有標題級別，正在使用中。

<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>

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