分類: 開發工具
HTML 標題結構檢查工具
列出 H1-H6 標題大綱並標記結構性問題
貼上 HTML 即可以文件大綱的形式查看其 H1 到 H6 的標題結構,並標記缺漏的 H1、多個 H1、跳級的標題層級以及空白標題。全程在你的瀏覽器中執行。
標題大綱
H1How local browser tools workH2Why run tools in the browserH4A skipped levelH2Another sectionH3(空白標題)
問題
- 有一個 H3 標題沒有文字內容。
- 標題層級從 H2 跳到 H4,中間跳過了一個層級。
本頁的所有處理都在瀏覽器中完成,不會上傳任何內容。
這個工具能做什麼
螢幕閱讀器與搜尋引擎都仰賴標題層級來理解頁面結構,因此缺漏的 H1、兩個互相競爭的 H1,或是從 H2 直接跳到 H4,都會讓一篇寫得很好的頁面變得更難閱覽。本工具會依文件順序擷取貼上的 HTML 中的每一個標題,以縮排大綱的形式呈現,並標記出那些在編輯範本時很容易不小心引入的結構性問題。
使用方式
- 在輸入框中貼上頁面或文章的 HTML。
- 檢視標題大綱,確認它與頁面預期的結構相符。
- 修正被標記出的問題,例如缺漏的 H1 或跳級的標題層級。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享,關閉分頁就隨之消失。
常見問題
- 我的 HTML 會被上傳到任何地方嗎?
- 不會。文件只會被瀏覽器分頁中的分詞器當作文字讀取,不會被算繪或傳送到伺服器。
- 為什麼跳級的標題層級很重要?
- 輔助技術的使用者經常透過在同一層級的標題之間跳轉來閱覽頁面;從 H2 直接跳到 H4 會讓人誤以為漏掉了某個部分,也會讓結構變得難以理解。
- 空白的 alt 屬性和空白標題是同一回事嗎?
- 不是,兩者並無關聯。像 <h3></h3> 這種沒有文字內容的空白標題永遠是一種錯誤,本工具會將其標記出來;而圖片上空白的 alt 屬性則是另一種不同、通常是刻意為之的情況,由圖片替代文字稽核工具負責處理。