雖然 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 腹部
理解成功標準 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 -->
</header>
<!-- page content -->
<footer>
<nav aria-labelledby="footer-navigation">
<h2 id="footer-navigation">Footer navigation</h2>
<!-- navigation items -->
</footer>
在這個例子中，螢幕閱讀技術會宣佈有兩個 nav 章節，一個叫「主導航」，一個叫「頁腳導航」。如果沒有提供標籤，使用螢幕閱讀軟體的人可能需要調查每個 nav 元素的內容來確定它們的目的。
使用 aria-labelledby 屬性
標記區域 • 頁面結構 • W3C WAI Web Accessibility Tutorials
