はじめに

HTMLを書いていると、こうなる。

「ここ、まとまりっぽいから <section>？」
「いや、CSS当てたいだけだから <div>？」
「結局どっちでも表示は同じだし、迷うだけでは…？」

表示だけ見れば差はほぼ出ない。だが、意味が違う。意味が違うと、アクセシビリティ、ドキュメント構造、保守性に影響してくる。

この記事では、<section> と <div> の違いを、仕様の考え方に寄せつつ、現場で迷わないための判断基準として落とし込む。

結論：section は「主題のまとまり」、div は「意味なしの箱」

• <section>：同じテーマ（主題）でまとまったコンテンツの塊を表す。基本、見出し（h1〜h6）とセットで使う。
  「ページのアウトラインに載ってほしい塊」向き。

• <div>：意味を持たない汎用コンテナ。スタイリングやJSの都合で包むための箱。
  「意味は増やさず、まとめたいだけ」向き。

ここで大事なのは「どっちも囲えるから同じ」ではなく、囲った結果として機械（支援技術・解析ツール・開発者）が受け取る意味が違うという点。

手順

ステップ1：その塊、見出しを付けて説明できるかを自問する

まず自分に聞く。

• 「このブロック、見出しを付けるとしたら何て名前になる？」
• 「その見出し、ページ内の目次（アウトライン）に載っても自然？」

YESなら <section> を検討する。
NOなら <div> で済むケースが多い。

例：section が合うケース

<section>
  <h2>料金プラン</h2>
  <p>無料・Pro・Enterpriseの3種類。</p>
</section>

<section>
  <h2>よくある質問</h2>
  <ul>
    <li>解約はいつでも可能か</li>
    <li>請求書払いはできるか</li>
  </ul>
</section>

「料金プラン」「よくある質問」みたいに、主題が明確で、見出しが自然に付く。

ステップ2：目的が「見た目」か「意味」かを切り分ける

迷いの9割はこれ。

• CSSを当てるために包みたい
• Grid/Flexの都合で一段ラップが必要
• JSで掴みやすくしたい

この手の理由なら、基本は <div>。

<section>
  <h2>ニュース</h2>

  <div class="news-grid">
    <article>...</article>
    <article>...</article>
    <article>...</article>
  </div>
</section>

ニュース自体は section。
レイアウト用の箱は div。
役割が分かれているから、読んだ瞬間に意図が伝わる。

ステップ3：「セマンティック要素があるのに section を使ってないか」を確認する

<section> は便利だが万能ではない。HTMLには「意味付きの専用タグ」が他にもある。

よくある置き換え候補はこのあたり。

「とりあえず section」になりがちな現場ほど、のちのちHTMLが読みにくくなる。
専用タグがあるならそっち優先、残りを section、最後に div、という順が強い。

ステップ4：アクセシビリティ視点で「名前」を付ける

<section> は「主題のまとまり」だが、支援技術が扱いやすい形にするには、セクションに名前が必要になる場面がある（ランドマーク的なナビゲーションで効く）。

基本は見出しをセットにする。

<section aria-labelledby="intro-title">
  <h2 id="intro-title">導入</h2>
  <p>このページの目的は〜</p>
</section>

見出しがないのに section を置くと、ただの箱になってしまう。
それなら div でよい。いや、むしろ div のほうが誠実。

ステップ5：よくある誤解を潰す（ここが当惑ポイント）

誤解1：div も「セクション」じゃないのか

「囲ってるんだからセクションっぽい」感覚は分かる。だがHTMLの世界では、“セクションを作った” という意味が付くかが重要になる。divは意味を付けない。

誤解2：section をネストすると見出しサイズが変わる？

昔、一部ブラウザが「アウトラインに合わせて h1 を縮める」ような挙動を見せた時期がある。だが、見出しの見た目はCSSで制御する領域だし、今は挙動も統一的ではない。
実務では、見出しレベルは文書構造に合わせて付ける。見た目はCSSで付ける。ここを混ぜると事故る。

迷ったら使うチェックリスト

• このブロックは「テーマ」が一言で言える → section寄り
• 見出し（h2など）を付けると自然 → section寄り
• 目次に載っても違和感がない → section寄り
• 目的はレイアウト調整・JSフックだけ → div
• 適切な専用タグ（article/nav/aside/main）が存在 → それを優先
• 見出しも名前付けもない section → divに戻す

まとめ

<section> と <div> の違いは「見た目」ではなく「意味」にある。

• section：主題でまとまったコンテンツ。見出しと相性が良い
• div：意味を持たない箱。スタイルやスクリプト都合のラッパー

HTMLのセマンティック要素を丁寧に使うと、コードが読みやすくなる。チーム開発で効く。将来の自分にも効く。
次に迷ったら、「それはページのアウトラインに載る塊か？」と自分に聞く。YESなら section、NOなら div。これで迷いが一段減るはず。