「なんとなく」で使っていませんか？

HTMLを書いていると、必ずと言っていいほど登場するこの2つ。

<section>...</section>
<div>...</div>

見た目は同じ。
CSSも同じように当てられる。

でも意味はまったく違います。

今回は、

• <section> と <div> の本質的な違い
• それぞれの正しい使い方
• よくある間違い
• 実務で迷わない判断基準

を整理します。

まず結論

つまり、

<div> はレイアウト用
<section> は意味構造用

です。

<div> とは？

<div> は「division（区分）」の略。

意味はほぼありません。

<div class="card">
  <h2>タイトル</h2>
  <p>本文</p>
</div>

この場合、<div> 自体は

• SEO的意味なし
• アクセシビリティ的意味なし
• 構造的意味なし

ただの箱です。

だからこそ：

• レイアウト
• グルーピング
• CSSフック
• JS操作対象

に最適です。

<section> とは？

<section> は、

文書内の「意味のある区切り」

を表します。

例えば：

<section>
  <h2>サービス内容</h2>
  <p>当社では...</p>
</section>

これは「サービス内容」という
独立した意味のブロック になります。

一番大きな違い

<section> は見出しを持つのが基本

仕様上、<section> は

見出しを持つことが前提

です。

<section>
  <h2>会社概要</h2>
  ...
</section>

逆に、見出しのない <section> は不自然です。

よくある間違い

❌ とりあえず全部 section

<section class="inner">
<section class="wrapper">
<section class="box">

これは意味がありません。

レイアウト用なら <div> で十分です。

❌ 見出しのない section

<section>
  <p>ただのテキスト</p>
</section>

意味構造が曖昧になります。

セマンティクスの違い

検索エンジンやスクリーンリーダーは、

<section>

を見ると：

「ここは1つの論理ブロックだな」

と解釈します。

<div> は：

「ただのコンテナだな」

と扱われます。

実務での判断基準

迷ったらこの質問をします：

ここは“見出し付きの独立した内容”か？

YES → <section>
NO → <div>

具体例で比較

① ヒーローエリア

<section class="hero">
  <h1>Web制作の未来へ</h1>
</section>

OK。

意味のある独立ブロック。

② カードの内側

<div class="card">
  <h3>料金プラン</h3>
  <p>月額980円</p>
</div>

これは <div> が適切。

カード自体はレイアウト単位だからです。

③ サービス一覧

<section>
  <h2>サービス一覧</h2>  <div class="service">
    <h3>デザイン</h3>
  </div>  <div class="service">
    <h3>開発</h3>
  </div>
</section>

ここでは：

• 外枠 → <section>
• 内部レイアウト → <div>

という使い分けが自然。

なぜこれが重要？

HTMLは「見た目を作る言語」ではありません。

意味を伝える言語

です。

正しく構造化すると：

• SEOが安定する
• スクリーンリーダーが理解しやすい
• 文書アウトラインが整う
• 保守性が上がる

さらに一歩：アウトライン構造

<section> を正しく使うと、

ページはこんな構造になります：

h1
 ├─ section (h2)
 │   ├─ section (h3)
 │   └─ section (h3)
 └─ section (h2)

これは検索エンジンにとっても分かりやすい構造です。

まとめ

最後に

なんとなく <section> を使うと、

セマンティクス崩れ

になります。

なんでも <div> で書くと、

意味のないHTML

になります。

大切なのは、

• 構造を考える
• 内容を区切る
• レイアウトと意味を分ける

こと。