セマンティックHTMLの落とし穴：`article`内外の`header`/`footer`をどう使い分けるべきか

フロントエンドの現場で「セマンティックに書こう」という合言葉を耳にしない日はありません。しかし、いざ実装を進めると、`header`や`footer`をどこに置くべきか、特に「ページ全体」と「個別の記事コンテンツ」が混在する場面で迷った経験はないでしょうか。

「全部`header`タグで囲めばいいんでしょ？」と安易に考えていると、アクセシビリティツリー（支援技術がページを解釈するための地図）を混乱させ、SEOの文脈でも損をすることになります。今日は、中級エンジニアなら絶対に押さえておきたい、`article`内外のセクション構成の「作法」について、少し深い話をしましょう。

1. なぜ「入れ子」にしても問題ないのか？

まず大前提として、HTMLの仕様上、`header`や`footer`は「どのセクショニングコンテンツに属しているか」によってその役割を動的に変化させます。

• `body`直下の`header`: ページ全体のロゴ、グローバルナビゲーション、サイトの顔。
• `article`内の`header`: その記事のタイトル、投稿日、著者情報、リード文。

ブラウザのパーサーは、これらを「階層構造」として認識します。`article`の内側にある`header`は、外側のグローバルな`header`の配下にあるのではなく、あくまで「`article`という独立したコンテキストの構成要素」として処理されます。この「スコープの分離」を意識できるかどうかが、マークアップの質を分ける分岐点です。

2. 実務で直面する「役割の境界線」

現場でよくある失敗は、`article`の外側の`footer`を、記事のフッター（共有ボタンや著者紹介）と混同してしまうケースです。

• ページ全体（`body`）の`footer`: サイトマップ、著作権表示、運営会社情報など「サイト全体」に関わるもの。
• `article`の`footer`: 記事に関連するタグ、関連記事リンク、ライセンス情報など「その記事」に付随するもの。

これらを混同してCSSで無理やりレイアウトを調整しようとすると、`main`タグの中にページ全体のフッターを配置するような、意味論的に破綻した構成になりがちです。構造の正しさは、将来的なメンテナンス性と、スクリーンリーダーを用いたユーザー体験に直結します。

3. 【実例】コピペで使える堅牢なセマンティック構成

それでは、実際に現場でそのまま使える、構造化されたサンプルコードを見てみましょう。

4. シニアからのワンポイントアドバイス

この構成を作る際、一つだけ注意点があります。それは「過剰にセマンティックを追い求めない」という引き算の美学です。

もし記事が単なる「お知らせ」のリスト程度であれば、無理に`article`や`header`で囲む必要はありません。逆に、複雑なブログ記事や詳細ページであれば、この構成は非常に強力な武器になります。

特に、`article`内では`h1`を複数使わず、`h2`から始めるのがSEOの定石です。`article`という「独立して再利用可能なコンテンツ」を意識し、その中だけで完結する情報は、必ず`article`のタグ内に閉じ込めてください。

まとめ

• `header`/`footer`は「属する親要素」によって役割が変わる。
• ページ全体の枠組みと、記事内の構成要素は明確に分ける。
• 構造が正しければ、将来的なリニューアルやアクセシビリティ対応が圧倒的に楽になる。

HTMLは「ただのタグ付け」ではなく、ブラウザや検索エンジンへの「設計図の提示」です。この視点を持つだけで、あなたの書くコードは一気にプロフェッショナルなレベルへと昇華されます。次の実装から、ぜひこの「スコープの分離」を意識してみてください。