1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <h1>

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

從 <h1> 到 <h6> 的 HTML 元素表示六個級別的章節標題。<h1> 是最高級別的章節，而 <h6> 是最低級別的章節。預設情況下，所有標題元素都會在佈局中建立一個塊級盒子，從新行開始並佔據其包含塊中所有可用寬度。

試一試

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

屬性

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

用法說明

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

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

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

注意：在舊版本的 HTML 標準中，允許在巢狀的分割槽元素中巢狀多個 <h1> 元素。然而，這從未被認為是最佳實踐，並且現在不符合規範。在沒有文件大綱演算法中閱讀更多內容。

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

為 <h1> 指定統一的字型大小

在 2025 年 5 月之前，HTML 標準規定 <section>、<article>、<aside> 或 <nav> 元素中的 <h1> 元素應呈現為 <h2>（較小的font-size和調整後的margin-block），如果再巢狀一層，則呈現為 <h3>，依此類推。這種特殊的、依賴上下文的預設樣式現已移除。

為確保對實現舊的、依賴上下文的預設樣式的瀏覽器進行一致的 <h1> 渲染，請使用以下樣式規則

css
h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

或者，為了避免覆蓋其他針對 <h1> 的樣式規則，您可以使用:where()，它的特異性為零

css
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

無障礙

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

不要這樣做

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>

巢狀

標題可以作為子節巢狀，以反映頁面內容的組織結構。大多數螢幕閱讀器還可以生成頁面上所有標題的有序列表，這可以幫助使用者快速確定內容層次結構並導航到不同的標題。

給定以下頁面結構

html
<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</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 元素的內容來確定它們的用途。

示例

所有標題

以下程式碼展示了所有正在使用的標題級別。

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>

技術摘要

內容類別 流內容、標題內容、可感知內容。
允許內容 短語內容.
標籤省略 無，起始標籤和結束標籤都必須存在。
允許父級 任何接受流內容的元素。
隱式 ARIA 角色 heading
允許的 ARIA 角色 tab、presentation 或 none
DOM 介面 HTMLHeadingElement

規範

規範
HTML
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

瀏覽器相容性

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.