<h1>–<h6>:HTML 章節標題元素
<h1>
到 <h6>
HTML 元素代表六個級別的章節標題。<h1>
是最高的章節級別,<h6>
是最低的。默認情況下,所有標題元素在佈局中創建一個區塊級區域,從新行開始並佔據其包含區塊中可用的全部寬度。
嘗試一下
屬性
這些元素僅包括全域屬性。
使用注意事項
避免在一頁上使用多個 <h1>
元素
雖然 HTML 標準允許在一個頁面上使用多個 <h1>
元素(只要它們不是嵌套的),但這不被認為是最佳實踐。一個頁面通常應該只有一個 <h1>
元素,用於描述頁面的內容(類似於文件的 <title> 元素
)。
備註:
在舊版 HTML 標準中允許將多個 <h1>
元素嵌套在嵌套的章節元素中。然而,這從未被視為最佳實踐,現在已不符合規範。詳情請參見 There Is No Document Outline Algorithm。
請優先使用每頁僅有一個 <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>
嵌套
標題可以嵌套為子節以反映頁面內容的組織結構。大多數螢幕閱讀器也可以生成頁面上所有標題的有序列表,這可以幫助人們快速確定內容的層次結構:
-
h1
甲蟲-
h2
語源 -
h2
分佈與多樣性 -
h2
進化h3
晚古生代h3
侏羅紀h3
白堊紀h3
新生代
-
h2
外部形態-
h3
頭部h4
口器
-
h3
胸部h4
前胸h4
中胸
-
h3
腿部 -
h3
翅膀 -
h3
腹部
-
-
當標題嵌套時,關閉子節時可能會「跳過」標題級別。
標記章節內容
另一種螢幕閱讀軟體用戶常見的導航技術是生成章節內容的列表並用它來確定頁面的佈局。
可以使用 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
元素的內容來確定它們的目的。
技術摘要
規範
Specification |
---|
HTML # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |
瀏覽器相容性
html.elements.h1
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h1 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h2
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h2 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h3
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h3 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h4
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h4 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h5
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h5 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h6
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h6 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support