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

<h1> 到 <h6> HTML 元素代表六個級別的章節標題。<h1> 是最高的章節級別，<h6> 是最低的。默認情況下，所有標題元素在佈局中創建一個區塊級區域，從新行開始並佔據其包含區塊中可用的全部寬度。

嘗試一下

屬性

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

使用注意事項

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

避免在一頁上使用多個 <h1> 元素

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

备注： 在舊版 HTML 標準中允許將多個 <h1> 元素嵌套在嵌套的章節元素中。然而，這從未被視為最佳實踐，現在已不符合規範。詳情請參見 There Is No Document Outline Algorithm。

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

範例

所有標題

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

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

範例頁面

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

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

無障礙議題

導航

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

不要這樣做：

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

請這樣做：

html
<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 腹部

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

標記章節內容

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

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

章節內容範例

html
<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 角色 heading
允許的 ARIA 角色 tab、presentation 或 none
DOM 介面 HTMLHeadingElement

規範

Specification
HTML Standard
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

瀏覽器相容性

html.elements.h1

BCD tables only load in the browser

html.elements.h2

BCD tables only load in the browser

html.elements.h3

BCD tables only load in the browser

html.elements.h4

BCD tables only load in the browser

html.elements.h5

BCD tables only load in the browser

html.elements.h6

BCD tables only load in the browser

參見