【テクニカル・上級編】h1-h6要素による文書アウトラインの構築 – HTML実践ガイド

見出し（h1-h6）という名の「DOMの骨格」を再考する：アクセシビリティと構造的整合性の極致

フロントエンドの現場で「セマンティックなマークアップ」という言葉を耳にするたび、多くのエンジニアは「まあ、SEOのためだろ？」と軽く流しがちだ。しかし、ブラウザのレンダリングエンジンやスクリーンリーダー（AT）、そして検索エンジンのクローラーにとって、`h1`から`h6`までの見出しタグは、単なる文字の大きさや太さを指定する装飾ではない。それは、ドキュメントの「論理的な要約」であり、DOMツリーという複雑な迷宮を探索するための「道標」である。

今回は、経験豊富なテックリードたちが陥りがちな「見出し構造の罠」を解き明かし、堅牢で高パフォーマンスなWebアプリケーションを構築するための指針を提示しよう。

1. アウトラインアルゴリズムの幻想と「h1」の唯一性

かつてHTML5仕様には、`section`や`article`タグを入れ子にすることで見出しレベルを自動計算する「アウトラインアルゴリズム」が存在した。しかし、現在これを完全に実装しているブラウザは存在しない。つまり、ブラウザのアクセシビリティツリーを正しく構築するためには、人間が論理的な階層（h1 > h2 > h3…）を遵守するしかない。

特にReactやVueといったコンポーネント指向のフレームワークでは、再利用性を優先するあまり、コンポーネント内部で「見出しレベルをハードコード」してしまうという重大な設計ミスが多発する。

解決策：階層注入パターン（Heading Level Context）

コンポーネントが自身の見出しレベルを外部から制御できるように、Context APIやPropsによる階層管理を行うべきだ。

// HeadingContext.tsx – 階層を動的に制御する設計
import React, { createContext, useContext } from ‘react’;

// 現在のセクションレベルを管理するコンテキスト
const HeadingLevelContext = createContext(1);

export const Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const level = useContext(HeadingLevelContext);
return (

{children}

);
};

export const AutoHeading: React.FC<{ title: string }> = ({ title }) => {
const level = useContext(HeadingLevelContext);
const Tag = `h${level}` as keyof JSX.IntrinsicElements;
// 階層に応じて自動的にh1~h6が切り替わる
return {title};
};

2. パフォーマンスへの影響：リフローとレイアウトシフト

見出しは多くの場合、フォントサイズやマージンといった「重いCSSプロパティ」を伴う。もし、見出しの階層が動的に変化する際に、CSSのクラス設計が甘ければどうなるか？

DOMのノードが置換されたり、クラス名によってスタイルが大きく書き換わったりすると、ブラウザは「リフロー（再レイアウト）」を強制される。特に、CSS-in-JSライブラリを使って実行時に動的にスタイルを生成している場合、レンダリング負荷は馬鹿にならない。

避けるべき手法: 見出しのレベルが変わるたびに `styled-components` で完全に新しいコンポーネントを生成する（これでは毎回CSSOMの再計算が発生する）。
推奨手法: 基底クラスでレイアウト（Box Model）を固定し、階層ごとの差異は`font-size`などの最小限の変数（CSS Variables）のみで制御する。

3. 非同期読み込みとアクセシビリティの競合

モダンなSPAでは、コンテンツが非同期（SuspenseやSWR）でロードされることが常態化している。ここで発生するのが「見出しの欠落」問題だ。

例えば、`h1`が存在するはずのページで、APIレスポンスを待っている間に「見出しが存在しない」状態が発生すると、スクリーンリーダーユーザーは「ページ構造が読み込めない」と判断して離脱する可能性がある。

これを防ぐには、「スケルトンUI」にも論理的な見出しを埋め込む必要がある。

// スケルトンUIにおける見出しの重要性
const SkeletonHeading = () => (

);

4. 堅牢なアーキテクチャのためのチェックリスト

最後に、テックリードとしてコードレビュー時に確認すべき「見出しの健康診断」項目を記す。

1. 見出しのスキップはないか？: `h2`の次にいきなり`h4`が来るような「階層の飛び」は、視覚障害者にとって情報の優先順位を見失う最大の要因だ。
2. `h1`はページ単位で一意か？: HTML5において`h1`は「ページのメインタイトル」である。`article`内にあるからといって無制限に`h1`を乱用するのは、SEOの観点からも推奨されない。
3. 役割（Role）との整合性: `h1-h6`タグを使わずに`div`で`role=”heading” aria-level=”2″`と書くのは最終手段だ。ブラウザのネイティブ挙動を殺し、不必要なバグを誘発する温床となる。

結び：エンジニアの美学

見出しを整えることは、単なる規約の遵守ではない。それは、あなたが書くコードが「誰にでも公平に届けられる」という、エンジニアとしての倫理観の表明だ。

ブラウザのエンジンがどのようにDOMツリーを構築し、アクセシビリティツリーがそれをどう解釈するか。その裏側に想いを馳せることができるエンジニアこそが、真に堅牢で、時代に流されないWebアプリケーションを構築できる。

さあ、あなたのプロジェクトのDOMツリーを今一度見直してみてほしい。そこに「意味」はあるだろうか？