HTMLの「アウトラインアルゴリズム」という幻想を捨て、見出しで構造を語る理由
フロントエンドの世界に足を踏み入れ、マークアップを学び始めると必ず一度は耳にするのが「セクショニング・コンテンツによるアウトライン生成」という概念です。
「`
`を入れ子にしていけば、自動的に文書構造が階層化されていく」――。そんな夢のような仕様を、一度は信じた方も多いのではないでしょうか。しかし、現実はもっと泥臭い。今日は、仕様と実装の「乖離」という現実を直視し、私たちが明日から現場でどう振る舞うべきかを整理したいと思います。
1. 仕様上の理想と、ブラウザという現実の冷たい壁
HTML5の策定当時、W3Cは「アウトラインアルゴリズム」という非常に野心的な仕様を掲げました。これは、`section`や`nav`、`aside`などが入れ子になった際、中にある見出し要素（`h1`～`h6`）がその階層に応じて自動的にレベル付けされるというものです。
例えば、以下のような構造を考えてみてください。
親セクション
子セクション
仕様上は、内側の`h1`は自動的に`h2`として解釈されるはずでした。しかし、この機能はブラウザの実装において、完全に敗北しました。
主要なブラウザのアクセシビリティツリー（スクリーンリーダーが読み取る構造）を見ても、この入れ子による自動見出しレベルの変換は、ほぼサポートされていないのが現状です。多くのブラウザは、HTMLのタグ構造とは無関係に、「見出し要素は、見出し要素として見えているレベルのまま」として扱います。
つまり、「`
2. 現場のベストプラクティス：見出し要素は「物理的」に書く
では、どうすればいいのか。答えはシンプルで、かつ泥臭い。「仕様に頼らず、見出しレベル（`h1`〜`h6`）を物理的に正しく書く」ことです。
モダンなフロントエンド開発において、セクショニング要素（`section`, `article`, `main`など）は「文書構造のランドマーク（目印）」として利用し、見出しの階層はあくまで`h`タグの数字で制御する。これが、現在考えうる最も堅牢で、ブラウザ互換性の高いアプローチです。
3. 実践：保守性と可読性を両立させる構造化コード
現場でそのまま使える、セマンティックかつクリーンな構造のサンプルを紹介します。ポイントは「セクショニング要素でコンテキストを切り、見出しで階層を示す」という二段構えです。
フロントエンドの現代的な構造化戦略
公開日: 2023年10月27日
アウトラインアルゴリズムの現状
ここに詳細な解説文が入ります…
なぜ実装が分かれたのか
ブラウザベンダー間の合意形成の難しさが要因です。
結論と今後の展望
タグの入れ子に頼らず、hタグの数値を正しく管理しましょう。
なぜこのコードが良いのか？（現場の視点）
1. スクリーンリーダーへの優しさ: 支援技術は、`main`や`article`といったランドマークを頼りにページを移動します。`h1`から`h6`までが論理的に繋がっていることで、ユーザーは迷子にならずに構造を把握できます。
2. CSS設計との親和性: `section`や`article`に`scope`を持たせることで、CSSのコンポーネント設計（BEM等）とも非常に相性が良くなります。
3. 未来への適応: 将来的に仕様が改善され、ブラウザが完璧にアウトラインを解釈するようになったとしても、この「物理的に正しい階層」のコードは決して損をしません。
最後に：綺麗なコードは「裏切らない」
技術ドキュメントを読むと、つい「新しい仕様」に飛びつきたくなります。しかし、ブラウザという黒箱の向こう側で何が起きているかを想像する力こそが、シニアエンジニアに求められるスキルです。
アウトラインアルゴリズムのような「自動化」は魅力的ですが、Web開発において「明示的に書く」ことは、バグを減らすための最強の手段です。皆さんのコードが、誰にとっても、どんなブラウザにとっても、美しく読み解ける構造であることを願っています。
明日からのマークアップで、ぜひ「見出しの数字」を意識してみてください。その小さなこだわりが、サイトの品質を一段引き上げます。
コメント