脱・div地獄：セマンティックな構造化でコードに「意味」を宿す技術

フロントエンドの現場でコードレビューをしていると、未だに「とりあえず全部`div`で囲んでおけばいいや」という設計に出くわすことがあります。スタイルを当てるだけなら確かに`div`で十分かもしれません。しかし、もしあなたが「保守性の高いコード」と「アクセシビリティ」の両立を目指す中級者以上のエンジニアなら、その考えは今日で卒業しましょう。

今日は、セクション系要素（`section`, `article`, `header`, `nav`, `footer`など）と、汎用要素である`div`の明確な境界線について、現場のリアルな知見を交えて深掘りします。

—

1. なぜ「意味のないタグ」を減らすべきなのか

ブラウザのレンダリングエンジンは、タグが何であれレイアウトの計算自体はこなしてくれます。しかし、ブラウザの「アクセシビリティ・ツリー（AOM）」の構築においては、`div`はあくまで「その他大勢の箱」です。

一方で、`section`や`article`といったセマンティック（意味論的）な要素は、ブラウザに対して「ここは文書のまとまりですよ」「ここは見出しの対象範囲ですよ」というメタ情報を伝達します。スクリーンリーダーがページを読み上げる際や、検索エンジンのクローラーがページの構造を把握する際、これらのタグがあるのとないのとでは、雲泥の差が生まれるのです。

2. 「div」と「section」の決定的な使い分け基準

結論から言えば、「見出し（h1〜h6）を伴う論理的なまとまりかどうか」が最大の判断基準です。

• `div` を使うべき場面：
• CSSによるレイアウト（Flexbox/Grid）の調整が必要だが、文書構造には影響を与えない場合。
• 特定の要素をグループ化して背景色や枠線を適用したいだけの場合。
• 他に適切な意味を持つタグが見当たらないとき。
• `section` を使うべき場面：
• その中に「見出し」が含まれることが前提のコンテンツのまとまり。
• ページ全体を分割して、それぞれが独立したテーマやトピックを持つ場合。

「`section`を使うなら、必ず見出しを入れろ」。これがW3Cの仕様における黄金律です。もし見出しが不要で、ただのレイアウトの箱なら、迷わず`div`を使いましょう。無理に意味を持たせようとして、構造を歪めるのが一番の悪手です。

3. 実践：現場で使える「綺麗な」構造化サンプル

以下に、モダンなブログ記事の構成例を記します。よくある「divのネストだらけのコード」と比較して、いかに読みやすく、かつ構造が明確かを確認してください。

4. シニアからのアドバイス：保守性を高めるために

現場で一番大切なのは「将来の自分やチームメンバーが、コードを見た瞬間に構造を理解できるか」です。

1. divを「レイアウト用の箱」と割り切る： `div`自体は決して悪ではありません。CSSの設計（BEMなど）と組み合わせることで、非常に強力なツールになります。
2. 迷ったら「その塊に見出しを付けられるか？」と自問する： もし付けられないなら、それは無理に`section`にする必要はありません。`div`で囲む方が適切です。
3. 過剰なセマンティクスを避ける： 全てを`section`で囲めばいいというものではありません。過剰なタグ付けは、逆にコードの可読性を下げます。

「セマンティックなHTMLを書く」ということは、単なるお作法ではなく、あなたのプロダクトがより多くの人に、より正確に届くための「設計図」を書いているという意識を持ってください。

まずは既存のコンポーネントを一つ選んで、`div`から適切なセマンティックタグへのリプレイスを試してみてください。ブラウザのアクセシビリティツリーが劇的に整理される快感を、ぜひ体験してほしいと思います。