セマンティックHTMLの「深淵」——セクションの入れ子構造と設計の美学

フロントエンドの世界に足を踏み入れたばかりの頃、多くの人が直面する壁が「タグの使い分け」です。`section`、`article`、`div`……。正直、「全部 `div` で囲めば動くし、それで良くない？」と思ったことはありませんか？

実務で数多のコードレビューをしてきましたが、マークアップの良し悪しは、そのまま「そのエンジニアが情報の構造をどれだけ深く理解しているか」に直結します。今日は、中級者へステップアップするために避けては通れない、セクションの入れ子構造と設計パターンについて、現場の知見を交えて深掘りしていきます。

—

1. 「セクション」は単なる箱ではない

まず、前提を共有しましょう。HTML5におけるセクション要素（`header`, `nav`, `main`, `article`, `section`, `footer`）は、単なるレイアウトのための箱（コンテナ）ではありません。これらは「アウトライン（文書構造）」を定義するための骨組みです。

ブラウザのアクセシビリティツリー（スクリーンリーダーなどが読み取るツリー構造）を想像してください。ブラウザはこれらのタグを見て、情報の階層を論理的に解釈しています。つまり、セマンティックなマークアップは、検索エンジンや支援技術への「地図」を渡す行為なのです。

よくある誤解：sectionとarticleの境界線

• `
  
  `: 独立して再利用可能なコンテンツ（ブログ記事、ニュース投稿、コメントなど）。「それ単体で切り出しても意味が通じるか」が判断基準です。
• `
  
  `: 文脈的な区切り。特定のテーマを持つひとかたまり。見出し（h1-h6）を伴うのが原則です。

—

2. 実践：セクション入れ子の「黄金パターン」

現場で最も美しく、かつ保守性の高い設計パターンをコードで見ていきましょう。

パターン：記事の中にヘッダーとフッターを内包させる

ブログやニュースサイトの個別の記事詳細ページで最もよく使われる構成です。

なぜこの構造が良いのか？

• DOMの可読性: どこが「記事本体」で、どこが「その記事の補助情報」なのかが一目で分かります。
• スタイル適用の容易さ: 例えば「`.entry-header h1`」と書けば、サイト全体のメインタイトルと競合することなく、記事タイトルだけに安全にスタイルを当てることができます。

—

3. ブラウザが裏側で何をしているか？

ブラウザのレンダリングエンジンは、これらのタグを解析して「アクセシビリティツリー」を構築します。例えば、`nav` 要素は「ナビゲーション」というランドマーク（目印）として扱われます。

もし `section` や `article` を乱用して、見出し（`h1`〜`h6`）が欠落していると、ブラウザは「ここは構造的な区切りがあるはずなのに、見出しがない」と判断し、アウトラインが崩れます。これはスクリーンリーダーを使用するユーザーにとって、非常にナビゲートしづらいWebサイトとなります。

プロの教訓:
「構造タグを入れたら、必ず見出しを確認する」。これがセマンティックなコーディングの鉄則です。

—

4. 現場の「泥臭い」判断基準

最後に、現場で迷いやすいケースについてアドバイスを。

• 「とりあえずdivでいいや」の誘惑:

デザインの調整のためだけに `div` を重ねるのはOKです。しかし、そこに意味があるなら、必ずセマンティックなタグを選んでください。「意味」を付与することは、将来のあなた自身や、後からコードを触る同僚への最大のギフトになります。

• 入れ子の深さに注意:

`section` の中に `section`、さらにその中に……と深くしすぎると、逆にDOMが複雑化し、CSSのセレクタも長くなりがちです。「3階層以上入れ子にする場合は、設計を見直すタイミング」という基準を持っておくと、複雑なプロジェクトでも破綻しにくくなります。

終わりに

HTMLは単なる記号の羅列ではなく、「情報の意味を形にする言語」です。
綺麗な入れ子構造を書けるようになると、CSS設計（BEMやTailwindでの構成など）も驚くほど自然に決まるようになります。

まずは、次に書くコンポーネントの中で「これは `section` で囲むべきか？ それとも一つの独立した `article` か？」と、一度立ち止まって考えてみてください。その小さな思考の積み重ねが、あなたを「コードを書く人」から「システムを設計するエンジニア」へと押し上げてくれます。

現場からは以上です。さあ、エディタを開いて、美しい構造を組み上げましょう。