見出しタグは「装飾」ではない。HTMLアウトラインから考えるWebの骨格設計

フロントエンドの現場でコードレビューをしていると、未だに「見た目の文字サイズ」を基準に見出しレベル（h1-h6）を選んでいるコードを見かけることがあります。

「この箇所は少し小さく見せたいからh4でいいや」

もしあなたがそう考えているとしたら、それは今すぐやめるべきです。見出しタグはCSSによる視覚的な装飾ではなく、文書の構造（アウトライン）をブラウザと検索エンジンに伝えるための「地図」だからです。

今日は、中級エンジニアの皆さんが明日から胸を張って設計できるよう、HTMLアウトラインの正当な組み方と、ブラウザがどうそれを受け取っているのかを深掘りしていきましょう。

—

1. なぜ「アウトライン」が重要なのか？

ブラウザのレンダリングエンジンは、HTMLを受け取るとDOMツリーを構築し、それとは別に「アクセシビリティツリー」を作成します。スクリーンリーダーを利用するユーザーは、このツリーを辿ってWebサイトを閲覧します。

もし、`h1`の次にいきなり`h4`が来たり、装飾目的で`h3`を多用していたらどうなるでしょうか。視覚情報を持たないユーザーにとって、そのサイトは「階層が崩壊した迷路」になります。

また、Googleのクローラーにとっても同様です。適切な見出し構造は、ページ内のどの情報が重要で、どの情報がその詳細（サブセクション）なのかを判断する重要な指標になります。SEOにおける「トピックの関連性」は、この構造から算出されていると言っても過言ではありません。

—

2. セクション要素と見出しの関係

HTML5以降、`section`や`article`といったセクション要素が登場しました。ここでよくある誤解が「sectionを使えば見出しレベルはリセットされる」というものですが、実は仕様上はそう単純ではありません。

「セクションには必ず見出しを含める」のが基本の鉄則です。

このように、`h1`から始まり、`h2`、`h3`と深掘りしていく階層構造を維持することで、ブラウザは「ここから先は前のセクションの子要素である」と正確に認識します。`section`タグで囲むことは、コードの可読性を上げるだけでなく、DOMのコンテキストを分割し、将来的な再利用性を高めることにも繋がります。

—

3. 実践：現場で使える「綺麗な」アウトライン設計

では、実際のコンポーネント設計でどう落とし込むか。私が現場で推奨している、メンテナンス性の高いコード例を紹介します。

このコードのチェックポイント

1. h1はページに1つ: `h1`はサイトロゴではなく、そのページで最も伝えたい内容（記事タイトル等）に使うのが鉄則です。
2. レベルを飛ばさない: `h1`→`h2`→`h3`という流れは、読者の思考の流れと一致します。
3. CSSクラスとの分離: `h1`だからといって「フォントサイズ32px」を直書きせず、`c-heading-main`のようにスタイル用クラスを当てることで、構造と見た目を完全に切り離します。

—

4. プロからのアドバイス：迷ったら「文書」を読み返せ

最後に、判断に迷った時のヒントをお伝えします。

「この見出しを抜いたら、ページの内容を理解できるか？」

そう自問自答してみてください。見出しとは、情報の要約であり、読者を次のステップへ導く案内板です。単なる「太字」や「大きい文字」が必要なだけなら、それは`h`タグではなく、CSSの`font-weight`や`font-size`を当てるべき場所です。

HTMLを正しく書くことは、単なる仕様遵守ではありません。それは、あなたの作ったWebサイトを「誰に対しても、どんな環境でも、等しく価値あるものにする」という、フロントエンドエンジニアの矜持そのものなのです。

ぜひ、次回のコーディングから意識してみてください。たったこれだけの積み重ねが、半年後のあなた自身のメンテナンスコストを劇的に下げ、サイトの品質を底上げしてくれますから。