先看這個例子
這份 Astera 示範筆記分「準備檔案」和「開啟頁面」兩部分。「揀檔案名稱」屬準備工作，再低一層。標題用甚麼層級，由 HTML 元素決定，並非看字有多大或多粗。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 頁面主題 | 查看「工作坊筆記」 | 唯一 main 區域內的 h1 |
| 準備工作的細項 | 查看「揀檔案名稱」 | 在「準備檔案」h2 下用 h3 |
| 另一項工作 | 查看「開啟頁面」 | 同級小節用 h2，不屬「揀檔案名稱」之下 |
瀏覽器怎樣處理
本例次序是 h1、h2、h3、h2。兩個 section 都直接放在 main 內，互為同級。改樣式時保留這個結構。這裏核對的是原生標題語意，並不假定所有閱讀工具都會建立或讀出同一份大綱。
只把段落加粗，會失去標題語意
反例用 CSS 把每行加粗，看起來像標題，卻全部仍是段落。只看截圖，便容易漏掉這種差別。
<main><p style="font-weight:bold">工作坊筆記</p><p style="font-weight:bold">準備檔案</p><p style="font-weight:bold">揀檔案名稱</p><p style="font-weight:bold">開啟頁面</p></main>反例有四個段落、零個標題。正例即使四個標題用同一字級，層級仍是 1、2、3、2。
試着修正
想在「揀檔案名稱」之下加「核對副檔名」，按這個結構應用哪個標題層級？
查看參考答案
用 h4，表示它是「揀檔案名稱」之下的小節。「開啟頁面」仍用 h2，因為它是另一項工作，不屬副檔名核對。
- 核對元素名稱及所屬小節，不只看字級。
- 本例改樣式後，標題次序仍須是 1、2、3、2。