現場でコードレビューをしていると、今でもたまに「HTMLの`h1`はページに一つだけであるべき」という、20年前のSEOの定説を信仰しているエンジニアに出会います。

結論から言えば、それは今のWeb標準（HTML5以降）において必ずしも正解ではありません。

今日は、`article`や`section`といったセクショニング要素の中で、どう見出しを設計し、ブラウザのアクセシビリティツリーをどうハックしていくべきか。現場で使える実践的な知見をシェアします。

—

まず、根本的な認識をアップデートしましょう。ブラウザのレンダリングエンジンや、スクリーンリーダーなどの支援技術は、実はHTMLの「アウトラインアルゴリズム」という仕組みを使って文書構造を理解しています。

かつては「`

`の中に`

`を入れれば、自動的にそれがそのセクションのランクになる」という仕様（HTML5.1で策定されていたもの）がありましたが、主要ブラウザが実装を見送ったため、現在この仕様は「非推奨」となっています。

つまり、現在のブラウザは、`

`タグがどこに入っていようと、基本的には「見出しレベル（h1~h6）の数値」をそのまま構造として認識します。

したがって、現場で守るべき鉄則はこれです。

1. `

`は文書のメインタイトルとして使う（原則1回）。
2. セクションごとの見出しは、論理的な階層（h2→h3…）に従って配置する。
3. `section`や`article`を使うなら、その中には必ず適切なレベルの`h2`〜`h6`を置く。

—

現場で「h1の再利用」が議論される理由

それでも、「コンポーネント単位で再利用したいから、中身のタイトルは全部`h1`でマークアップしたい」という要望は現場でよく出ます。特にReactやVueなどのコンポーネント指向開発では、「そのコンポーネントがどこに配置されるか分からない」というジレンマがあります。

ここで私たちが取るべきアプローチは「セマンティックな順序の遵守」です。

もしSEOやアクセシビリティを軽視して、`h1`を乱用するとどうなるか。スクリーンリーダーのユーザーは「見出しマップ」を読み取った際に、文書の階層構造を見失い、どこがメインコンテンツで、どこがサブコンテンツなのかを判断できなくなります。これはアクセシビリティ上の致命的なバグです。

—

では、どう書くのが正解か。以下のコード例を見てください。これは、大規模なメディアサイトやダッシュボードの構築で私が実際に採用しているアプローチです。