HTML見出し要素 — h1〜h6、見出しレベル、Outline
Technical Summary
h1〜h6は、内容の見出しと、その見出しの階層を表すHTML要素です。要素名の数字が基本の見出しレベルを示します。見出しレベルは、文字の大きさや太さとは別の情報です。
HTML Living Standardは、headingoffsetでその要素と子孫見出しの計算レベルを加算し、headingresetではその要素自身のoffsetを加えた後、外側の祖先をたどるのを止める仕組みも定義しています。この2属性は通常の見出し作成に必須ではありません。実装対応は対象ブラウザーで確認します。
要素の定義とcontent model
HTML Standardは、h1〜h6を「それぞれのsectionの見出しを表す要素」と定義します。要素名の数字に対応する見出しレベルがあり、その要素から見たsectionの階層と関係します。
| 項目 | 仕様上の内容 |
|---|---|
| 要素 | h1、h2、h3、h4、h5、h6 |
| 分類 | Flow content、heading content、palpable content |
| 配置 | Flow contentが許される位置。content modelはphrasing content |
| タグ省略 | 開始タグ・終了タグのどちらも省略できない |
| DOM interface | HTMLHeadingElement |
| 基本のレベル | h1は1、h2は2、…、h6は6。現在のHTML Standardは祖先属性によるoffsetも定義する |
見出しレベルと文書構造
見出しレベルは、内容同士の親子関係を示します。見出しを順番に並べたとき、1段深い内容へ進むならレベルを1つ上げます。ある下位の話題が終わり、別の上位の話題を始めるときは、前より小さい番号の見出しへ戻れます。
| 要素名 | 基本のレベル | 関係の例 |
|---|---|---|
h1 | 1 | 文書の主題 |
h2 | 2 | 主題の下にある話題 |
h3 | 3 | h2の話題に含まれる小項目 |
h4 | 4 | h3の下にある小項目 |
h5 | 5 | h4の下にある小項目 |
h6 | 6 | h5の下にある小項目 |
HTMLの適合条件では、文書に見出しがある場合、レベル1の見出しを少なくとも1つ含めることが勧められます。また、見出し順で直前の見出しより1段を超えて深く進む構造は適合しません。実際のページでは、見出しだけを順に読んでも内容のまとまりが分かるかを確認します。
見出しレベルを見た目の大きさとして使わず、CSSによる表示と意味上の階層を分けます。見出しの言葉も、後に続く内容を短く特定できる表現にします。
Outlineとsectionとの関係
HTML StandardでいうOutlineは、文書中のheadingをtree order、つまり文書ツリーで現れる順に並べたものです。目次を作るときは、各見出しから該当する内容へ移動できるようにします。
sectionやarticleを入れただけで、h1〜h6のレベルが自動的にリセットされるわけではありません。過去に説明された「sectionの中ではh1が自動的に次のレベルになる」という期待は、現在の一般的なブラウザーの挙動として扱えません。見出し要素とレベルを明示して検証します。
現在のHTML Standardには、別の明示的な仕組みとしてheadingoffsetとheadingresetがあります。計算では見出し自身と祖先のoffsetを加えます。headingoffsetの値は非負整数0〜8です。計算したレベルが9を超えた場合は9になります。headingresetがある要素では、その要素自身のoffsetを加えた後、さらに外側の祖先をたどるのを止めます。Shadow DOMでは、shadow rootのhostへ進んで計算します。HTML Standardでの定義、ブラウザーの実装、HTML-AAMのmappingは、それぞれ別に追跡します。
見出しと説明文をまとめるhgroupもありますが、このTopicの主対象はh1〜h6です。意味やoutline上の扱いは標準と対象実装を別に確認してください。
HTML-AAMとAccessibility Tree
HTML-AAM 1.0 Working Draft（2026-10-21）の要素mapping表では、h1〜h6はWAI-ARIAのheading roleに対応し、aria-levelは要素名の数字で設定されます。ブラウザーはこのroleとlevelをプラットフォームのAccessibility APIへ公開します。
このページのAAM実測はChromiumのAccessibility Treeを対象にします。これはブラウザーが組み立てる中間のアクセシビリティ表現です。Windows UI AutomationやIAccessible2を直接読んだ結果、NVDA・Narrator等の発話、点字出力とは区別します。HTML Standardのoffset計算とHTML-AAM draftの要素名ベースの表記との関係も、別のブラウザーで確認が必要です。
見出しを示す役割を持つのは、見た目ではなくDOM上の要素とARIA mappingです。見出しをCSSだけで大きくしても、HTML heading roleにはなりません。
Fact / Evidence
標準の定義、AAMの規範的mapping、WPT testharnessの結果、Chromiumで観測したAccessibility Treeを分けて記録します。WPTの一部失敗は対象ブラウザーで新しいselectorが無効なことを示し、headingoffset計算が標準どおり実装されたことまでは示しません。
| Type | Fact / Claim | Conditions / Scope | Status | Evidence |
|---|---|---|---|---|
| SPEC | h1〜h6はsectionの見出しを表し、要素名に基づく基本レベルを持つ。 | HTML Living Standard §4.3.6。要素分類、content model、DOM interfaceと見出し意味。 | 仕様確認済み | HTML Standard: h1–h6 |
| SPEC | 文書のOutlineはheadingのtree orderであり、headingoffsetとheadingresetは計算レベルに影響する。 | HTML Living Standard §4.3.11、§4.3.11.1。ブラウザー対応の主張とは分ける。 | 仕様確認済み | Headings and outlines · Heading levels & offsets |
| AAM | HTML-AAM 1.0 WDは、全6要素をheading roleに対応付け、aria-levelを要素名の数字に設定する。 | HTML-AAM 1.0 Working Draft 2026-10-21のmapping。ブラウザーのAccessibility Tree実測とは別のEvidence。 | Mapping確認済み | HTML-AAM: h1–h6 · WAI-ARIA: heading |
| WPT | 選定したHTML-AAM role・invalid-nesting testsはpass。headingoffset mutation testsは選定Chromiumでselector parse errorとなった。 | WPT commit 5b11a9b4169aba2d11f33d787c88222bf9f017c3。詳細な内訳はImplementation Evidenceと機械可読reportを参照。 | 部分実行 | roles.html · invalid-nesting.html · headingoffset-mutations.html |
Evidence
- HTML Living Standard, §4.3.6 The h1, h2, h3, h4, h5, and h6 elements — categories, placement, content model, DOM interface, and meaning.
- HTML Living Standard, §4.3.11 Headings and outlines — heading order, document outline, and conformance conditions.
- HTML Living Standard, §4.3.11.1 Heading levels & offsets — the
headingoffsetandheadingresetcalculation. - HTML Accessibility API Mappings 1.0 Working Draft, 2026-10-21: h1–h6 — heading role and
aria-levelmapping. - WPT HTML-AAM heading tests at the tested commit and the selected role and mutation files linked in the Fact / Evidence table.
Implementation Evidence
The selected WPT tests are pinned to one commit and run through the WPT testharness in local Chromium. For HTML-AAM tests, a Playwright / Chromium DevTools Protocol adapter provides computed role and label queries. This is not an official wptrunner / WebDriver run.
Dedicated fixture: heading-v1 records the six native heading elements, level offsets, reset boundaries, browser layout, theme controls, page metadata, and Chromium Accessibility Tree. It passed 16/16 DOM and selector checks. The machine-readable WPT result is in build-config/yugien/research-results/heading-v1/wpt-report.json; final browser conditions and results are recorded in docs/atlas/heading-evidence-2026-10-31.md.
| Type | Reproduced scope | Recorded conditions | Status |
|---|---|---|---|
| IMPL | Yugien / Atlasのja・en 4ページ、共通ナビ・検索・言語切替、レスポンシブ表示、テーマ切替、heading-v1のDOM・CSS計測 | 2026-10-31 / Windows 11 Pro build 26300 / Chromium 155.0.8059.85 / Playwright 1.62.1 / DPR 1 / local loopback。4ページすべてHTTP 200、canonical・ja/en hreflang・shared stylesheet・global navigation・言語切替・検索リンクを確認。幅320・390・768・1280・1920でdocument/bodyの横はみ出しなし。4ページすべてでChromiumのemulated prefers-color-scheme（dark / light）を使い、system・light・darkを切替。背景色はsystem dark / dark #1b201e、light #f5f1e8。検索は日本語見出しと英語headingで実施し、各言語のYugien / Atlas新Topicが結果に表示。fixture build-config/yugien/research-results/heading-v1/は16/16 checks pass。幅320pxではAtlas table wrapperが286px、Fact table内容が608px、Implementation Evidence tableは日本語627px・英語658pxでwrapper内を横スクロール。768pxでは英語Implementation Evidence tableがwrapper670px・内容690pxでwrapper内を横スクロール。 |
部分観測（Chromium 155 / 4ページ / 幅320–1920 / 3テーマ） |
| WPT | HTML-AAM heading role、invalid heading nesting、headingoffset mutationの選定WPT | 2026-10-31 / Chromium 155.0.8059.85 / Playwright 1.62.1。WPT revision 5b11a9b4169aba2d11f33d787c88222bf9f017c3。roles.html 60/60 pass（h1〜h6 role caseは6/6 pass）。invalid-nesting.html 16/16 pass。headingoffset-mutations.html 0/45 pass。45件すべてが:heading(1)をChromiumが無効なselectorとして拒否したエラー。属性計算そのものの適合性をこのWPT実行では判定できない。3ファイルをローカルtestharnessで実行し、HTML-AAMのrole/label helperはCDP Accessibility APIへ接続。公式wptrunner / WebDriver launcherではない。他のtest・browserは未実行。Report: build-config/yugien/research-results/heading-v1/wpt-report.json。実行したテストの版: |
選定WPTのみ（76 pass / 45 selector error） |
| AAM | heading-v1のh1〜h6・headingoffset・headingreset、および実ページ4件のh1におけるChromium Accessibility Treeのrole・name・level |
2026-10-31 / Windows 11 Pro build 26300 / Chromium 155.0.8059.85 / DPR 1。CDP Accessibility.getPartialAXTreeで測定。通常のh1〜h6はすべてrole heading、nameは内容文字列、levelは順に1〜6。実ページ4件の主見出しもrole heading・level 1。ancestor headingoffset=2の子h1はlevel 1のまま（HTML Standardの計算は3）、ancestor headingoffset=4と子孫headingresetの下のh2はlevel 2。CSS.supports("selector(:heading(2))")はfalse。Browser AX Treeの結果であり、Windows UIA / IAccessible2、他platform API、NVDA・Narrator等の発話・点字は未測定。 |
部分観測（Chromium AX Tree / 1環境） |
Coverage / Open Issues
- 仕様確認済み
h1〜h6の要素定義、heading level、Outline、headingoffsetとheadingreset - 選定WPTHTML-AAM role 60件とinvalid-nesting 16件を実行。全6 heading role testsを含む
- 未完了HTML Standardのoffset/reset mutation tests 45件は、Chromium 155が
:heading(1)を無効なselectorとして拒否したため0/45 pass。別測定では、祖先にheadingoffset=2があるh1のAX Tree levelが1のままで、Standardの計算値3を反映しなかった - 要追跡HTML-AAM draftの要素名ベースの
aria-level記述と、HTML Standardのoffset計算が他エンジン・platform APIでどう対応するか確認する - 未測定他ブラウザー、Windows UI Automation / IAccessible2、macOS AX、NVDA・Narrator等の読み上げ、点字出力、WPT全体
この結果はChromium 1環境と選定したWPT 3ファイルの範囲です。全ブラウザー、支援技術、アクセシビリティAPIへの適合を示すものではありません。