`で書いてもブラウザが自動的に階層化してくれる」という夢のようなアルゴリズムが提唱されていました。

しかし、現実は残酷でした。主要ブラウザやスクリーンリーダーのベンダーが、このアルゴリズムを実装しなかったのです。

結果として、現在私たちが依拠すべきルールは一つ。「見出しタグ（h1-h6）を使って、視覚的・論理的なドキュメントのアウトラインを素直に構築する」という、古き良き原則です。ブラウザは今も昔も、DOMツリー上の見出しタグを愚直に追いかけて階層を判断しています。

なぜ「階層」を飛ばしてはいけないのか

たまに、デザインの都合だけで`

`の次に` `を持ってくるコードを見かけますが、これは避けるべきです。理由は2つあります。 1. 支援技術のナビゲーションを破壊する: スクリーンリーダーユーザーは、ショートカットキーを使って「見出しリスト」をジャンプします。階層が崩壊していると、情報の重要度が正しく伝わらず、ユーザーは迷子になります。 2. SEOという副次的恩恵: Googleのクローラーもまた、DOM構造からコンテキストを読み取ります。論理的な階層は、検索エンジンに対して「ここが親トピックで、ここがサブトピックだ」という明確な地図を渡す行為なのです。 — 現場で即採用できる「セマンティックな構造」のサンプル

では、実務でどのような構造を書くのがベストか。再利用可能なコンポーネント設計を意識したコード例を紹介します。

このコードのポイント

• セクショニングコンテンツ（`
  
  `）の活用: `

  `は単なるスタイリングのための箱ではありません。「関連する見出しとコンテンツの塊」を定義するものです。
• 階層の連続性: `
  

  `の中に` `を置く。この直感的な親子関係を守ることが、何よりも強力なセマンティクスになります。 h1の扱い: 現代のモダンなWebサイトでは、` `を「サイトタイトル（ロゴ）」に使うか「ページタイトル」に使うかという議論がありますが、SEOの観点からは「そのページのメインテーマ」を記述するのが最も無難で効果的です。 — シニアエンジニアからの「現場の知恵」

  最後に、一つだけ現場のリアルなTipsを授けます。

  もし、デザイン上「どうしても`

  `の見た目にしたいが、マークアップ上は`

  `にすべき」という状況に陥ったらどうするか。迷わず`

  `を使い、CSSでスタイルを当ててください。

  「マークアップ＝情報の骨格」「CSS＝見た目の皮」です。デザインに引きずられて骨格を歪めるのは、家を建てる時に間取り図を無視するのと同じこと。

  コードは「書き手」のためのものではなく、未来の自分や、それを受け継ぐチームメンバー、そして何より「ブラウザという機械」と「ユーザーという人間」のためにあります。

  まずは今日、既存のページのソースを開いてみてください。`

  `から`

  `まで、滑らかな階段のように繋がっていますか？ その意識一つで、あなたのコードの品質は確実にワンランク上へ引き上げられます。