HTMLセクション構成要素：ただの「divの代わり」と呼ぶのはもうやめよう
フロントエンドの現場で、マークアップを眺めていると時折遭遇する光景がある。それは、どこもかしこも `
しかし、いまだに「意味のあるタグを使えばSEOにいいんでしょ？」程度の認識で止まっているエンジニアも少なくない。今日は、単なるタグの使い分けの話ではなく、ブラウザがどう「文書のアウトライン」を構築し、アクセシビリティツリーとどう対話しているのかという、一段深い話をしよう。
—
ブラウザの裏側：アウトライン生成のメカニズム
ブラウザは、HTMLを読み込む際、ただDOMツリーを作るだけではない。内部的には「アウトライン（文書の構造）」を生成している。
`header`, `nav`, `main`, `article`, `section`, `footer` といったセクション構成要素は、ブラウザに対して「ここは文書のまとまった領域である」というメタデータを伝えているんだ。
例えば、スクリーンリーダーを使っているユーザーにとって、これらは単なる見た目の箱ではない。「この領域はナビゲーション（nav）だ」「ここは独立したコンテンツ（article）だ」というナビゲーションの指針になる。もし君がすべてを `
これが、セクション構成要素を正しく使うべき「現場のリアルな理由」だ。
—
実践：メンテナンス性の高いセクション構成
では、現場でそのまま使える、堅牢かつクリーンな構造を見ていこう。ポイントは「入れ子の関係」と「ランドマークロール」の意識だ。
コーポレートサイトのタイトル
記事のタイトル
公開日：2023年10月27日
ここに記事のコンテンツが入ります…
このコードの「賢い」ポイント
1. `
2. `
- `article`: それ単体で独立して配信されても意味が通じる単位（ブログ記事、製品カードなど）。
- `section`: 文脈的に関連するコンテンツのまとまり。見出し（h1-h6）を伴うことが推奨される。
3. `aria-label` の補足: `nav` が複数ある場合（例：グローバルナビとページ内目次）、`aria-label` を指定して区別してやるのがプロの配慮だ。
—
シニアからのTips：なぜ「div病」を治すべきなのか
「別に `
コードを見ただけで「ここは記事本体だから編集すべき場所だ」「ここは共通パーツだから触らないでおこう」と、脳の認知負荷を下げられる。これは、君がチームで働く上で、最も高い評価を得られるスキルの一つだ。
明日からのマークアップで、少しだけ意識してみてほしい。「これは本当に `
もし迷ったら、いつでもこの記事を見返してくれ。現場の最前線で、君のコードが誰かの助けになることを願っている。
コメント