介面元件 核心 A1 · 正式標準 平台: 網頁

Heading Hierarchy

標題層級

標題層級用不同層級的標題,說明頁面各區段的關係。

看看怎麼運作
也有人這樣說 Heading Hierarchy文件標題大綱標題結構

看看怎麼運作

原創情境範例標題層級

另一個例子

醫療指南用一個 h1 顯示「氣喘管理」,用 h2 區分診斷和治療,再用 h3 列出藥物類型。即使卡片標題看起來較小,螢幕閱讀器仍會依這個大綱導覽。

主要部分

  1. 01頁面主標題
  2. 02章節標題
  3. 03子章節標題

什麼時候用

依頁面結構選擇 h1–h6。標題的視覺大小可另外設定。

什麼時候不要用

不要只為了字級選擇 h1–h6。也不要只為套用預設樣式而跳過層級。

程式裡的名稱

h1 through h6 selected by section depth

上線前要檢查

發布前檢查頁面結構、鍵盤操作、清楚可見的焦點、對比與縮放。也要檢查載入、沒有內容、錯誤、成功、取消與減少動態效果。

可以直接複製的需求

預期成果:使用 標題層級 (Heading Hierarchy) 解決這項需求,同時保留使用者目前的操作脈絡。 使用者情境:醫療指南用一個 h1 顯示「氣喘管理」,用 h2 區分診斷和治療,再用 h3 列出藥物類型。即使卡片標題看起來較小,螢幕閱讀器仍會依這個大綱導覽。 建議介面模式:標題層級 (Heading Hierarchy)。 適用理由:依頁面結構選擇 h1–h6。標題的視覺大小可另外設定。 不應使用的情況:不要只為了字級選擇 h1–h6。也不要只為套用預設樣式而跳過層級。 產品要求:定義預設、載入、沒有內容、錯誤、成功與復原狀態。保留使用者已輸入的內容,每個操作後都提供清楚回饋。 無障礙與韌性:使用結構正確的 HTML(語意化 HTML)和完整鍵盤操作。焦點要清楚可見,版面縮放後仍要好用。也要提供減少動態效果。遵守專案現有規則。除非專案已採用,否則不要新增介面元件庫。 驗收條件:主要任務可只用鍵盤完成,在 320px 寬度也能正常使用。焦點與狀態變化可被輔助工具讀出。載入、失敗、重試、取消與減少動態效果都已驗證。 證據與限制(證據邊界):標準只涵蓋列出的範圍,不會替你決定外觀、產品做法或 Vibulary 的教學範例。 待確認:產品文字、資料來源、分析事件、支援裝置與語系,以及平台特有限制。

檢查這份需求

請 AI 程式助手檢查目前如何使用 標題層級 (Heading Hierarchy)。 定義:標題層級用不同層級的標題,說明頁面各區段的關係。 正式環境檢查:發布前檢查頁面結構、鍵盤操作、清楚可見的焦點、對比與縮放。也要檢查載入、沒有內容、錯誤、成功、取消與減少動態效果。 修改程式前,先列出看到的證據、缺口、嚴重程度,以及最小且安全的修正。

A1
這個術語有多正式?

正式標準

本頁說明的規則,可在列出的正式標準中找到。

標準只涵蓋列出的範圍,不會替你決定外觀、產品做法或 Vibulary 的教學範例。

適用範圍
只包含來源有說明的內容:正式名稱、定義、語意、實作、無障礙、使用指南、避免事項
文件狀態
持續更新標準
查證日期
2026-07-30

證據來源與適用範圍

正式來源 + 術語參考資料 · WHATWG · 持續更新標準 HTML: Sections — Headings and outlines Headings and outlines 適用範圍: 正式名稱、定義、語意、實作 本頁用途: 直接術語參考 來源涵蓋內容: 正式名稱, 定義, 語意, 實作 正式來源 · WHATWG · 持續更新標準 HTML: Sections Sections 適用範圍: 正式名稱、定義、語意、實作 本頁用途: 只支援寫明的範圍 來源涵蓋內容: 正式名稱, 定義, 語意, 實作 正式來源 · W3C · 正式建議標準 Web Content Accessibility Guidelines (WCAG) 2.2 適用範圍: 無障礙、使用指南、避免事項 本頁用途: 只支援寫明的範圍 來源涵蓋內容: 無障礙, 使用指南, 避免事項

自行複製

瀏覽器無法自動複製。請選取下方文字,再自行複製。