分類: 開發工具

HTML 標題結構檢查工具

站方自行規劃沒找到想要的工具?

列出 H1-H6 標題大綱並標記結構性問題

貼上 HTML 即可以文件大綱的形式查看其 H1 到 H6 的標題結構,並標記缺漏的 H1、多個 H1、跳級的標題層級以及空白標題。全程在你的瀏覽器中執行。

H1 數量1問題2
標題大綱
  • H1 How local browser tools work
  • H2 Why run tools in the browser
  • H4 A skipped level
  • H2 Another section
  • H3 (空白標題)
問題
  • 有一個 H3 標題沒有文字內容。
  • 標題層級從 H2 跳到 H4,中間跳過了一個層級。

本頁的所有處理都在瀏覽器中完成,不會上傳任何內容。

這個工具能做什麼

螢幕閱讀器與搜尋引擎都仰賴標題層級來理解頁面結構,因此缺漏的 H1、兩個互相競爭的 H1,或是從 H2 直接跳到 H4,都會讓一篇寫得很好的頁面變得更難閱覽。本工具會依文件順序擷取貼上的 HTML 中的每一個標題,以縮排大綱的形式呈現,並標記出那些在編輯範本時很容易不小心引入的結構性問題。

使用方式

  1. 在輸入框中貼上頁面或文章的 HTML。
  2. 檢視標題大綱,確認它與頁面預期的結構相符。
  3. 修正被標記出的問題,例如缺漏的 H1 或跳級的標題層級。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享,關閉分頁就隨之消失。

常見問題

我的 HTML 會被上傳到任何地方嗎?
不會。文件只會被瀏覽器分頁中的分詞器當作文字讀取,不會被算繪或傳送到伺服器。
為什麼跳級的標題層級很重要?
輔助技術的使用者經常透過在同一層級的標題之間跳轉來閱覽頁面;從 H2 直接跳到 H4 會讓人誤以為漏掉了某個部分,也會讓結構變得難以理解。
空白的 alt 屬性和空白標題是同一回事嗎?
不是,兩者並無關聯。像 <h3></h3> 這種沒有文字內容的空白標題永遠是一種錯誤,本工具會將其標記出來;而圖片上空白的 alt 屬性則是另一種不同、通常是刻意為之的情況,由圖片替代文字稽核工具負責處理。