コーディングを始めたばかりの頃、架空のLPページを作っているときに、
とにかく、どんな要素でもまずdivで囲っていました。
見た目が崩れなければそれでOK。
タグの意味なんて気にしたこともなかったんです。
そんなある日、LPの構成を考えているときにふと行き詰まり、
調べていたら「section」というタグがあることを知りました。
「とりあえずdivを使ってたけど、sectionってどこで使うの？」
「もしかしたら、sectionを使うことでコードが見やすくなるのでは？」
そう思ってsectionについて調べ始めたのがきっかけでした。
それまではデザイン通りに表示できればOKと思っていましたが、
LPのように構成が多いページを作るほど、
タグの意味を意識することの大切さを感じるようになりました。
今では「この部分はどんな意味のまとまりなんだろう？」と考えながら
コードを書くようにしています。
この記事では、私がつまずきながら理解した
「divとsectionの違い」について、初心者の方にもわかりやすくまとめていきます。
divとsectionってそもそも何？
divは「ただの箱」
<div> は、ただの入れ物です。
HTMLの中で「この部分をひとまとめにしたいな」と思ったときに使う、
いわば“段ボール箱”のようなタグです。
たとえば、見た目を整えたいときや、背景色をつけたいとき、
複数の要素をまとめてレイアウトしたいときに使います。
<div class="card">
<div class="card__image"><img src="img.jpg" alt=""></div>
<div class="card__body">
<p>テキストが入ります。</p>
</div>
</div>📦 ポイント
- どんな要素を入れてもOK。
- 見た目や配置のために使う。
- ページ構造を整理するための“箱”と考えるとわかりやすいです。
sectionは「章やまとまりを示すブロック」
では、divと違って意味を持つタグにはどんなものがあるでしょうか？
その代表的なものが <section> です。
<section> は、意味のあるまとまり（トピック）を表します。
ページを“章ごと”に分けたいときに使うタグです。
たとえば、サービス紹介、料金プラン、会社概要、FAQなど、
「見出しをつけて説明できる内容」をまとめたいときに使います。
<section>
<h2>サービス紹介</h2>
<p>私たちのサービスについてご紹介します。</p>
</section>📘 ポイント
- 「内容に意味のある区切り」をつけたいときに使う。
- 基本的に見出し（h2〜h6）とセット。
- 本でいえば“章”や“節”のような役割。
私がsectionを使うようになったのは、
自分のコードを修正するときに「どこに何があるのか分かりにくかった」ことがきっかけです。
全部divで囲っていたので、後で修正しようとしても
どこがどのブロックなのか分からず、探すのにかなり時間がかかりました。
（インデントや改行で少し見やすくしていたものの、ぱっと見はdivだらけで混乱…）
そこで、ページの章ごとにsectionを意識して使うようにしたところ、
あとで見返したときに区切りがすぐに分かるようになり、作業効率がかなり上がりました。
それ以来、章やトピックごとにsectionを使うのが自分の定番になりました。
違いを理解するための具体例
divが向いている場面（装飾・囲い・レイアウト用）
- 背景や枠線をつけたいとき
- グリッドやflexの行・列のラッパー
- パーツの内側を分けたいとき
<div class="card">
<div class="card__thumb"><img src="thumb.jpg" alt=""></div>
<div class="card__body">
<p>テキストテキストテキスト</p>
</div>
</div>sectionが向いている場面（トピックのまとまり）
- 「お知らせ」「サービス紹介」「FAQ」などのブロック
- LPのセクション（ヒーロー・料金・CTAなど）
- 見出しを付けて章立てにしたい部分
<section class="news">
<h2>お知らせ</h2>
<ul>
<li>サイトをリニューアルしました。</li>
<li>新サービスを開始しました。</li>
</ul>
</section>「お知らせ」という意味のまとまりなので、sectionが適切です。
よくある間違い
とりあえずsectionで全部囲ってしまう
意味のない囲いにsectionを使うと、かえって構造が不自然になります。
装飾目的だけならdivでOKです。
見出し（hタグ）のないsectionを使っている
sectionは見出しとセットで使うのが基本です。
見出しが置けない場合は、divで十分です。
<!-- NG -->
<section class="wrapper">
<p>テキストテキスト</p>
</section>
<!-- OK -->
<section class="features">
<h2>特長</h2>
<p>テキストテキスト</p>
</section>私が意識するようになったポイント
- 「これは意味のあるまとまりか？」と一度立ち止まる
- ページ全体を“文章の章立て”のように考える
- 迷ったらまずdiv、慣れたらsectionを意識して使い分け
ミニチェックリスト
✅ そのブロックはトピック（章）として成立している？
✅ 見出し（h2/h3）が自然に置ける？
✅ 装飾やレイアウトだけの目的？（ならdivでOK）
今では、「この部分は本でいう章の部分だからsectionで、それ以外の中身はdivだな」と、
ルーティンのようにsectionとdivを使い分けています。
タグの意味を100％理解するのは難しいですが、
ある程度使い分けができていればまずは十分だと思います。
大切なのは、後で見返したときに自分（もしくは他の人）が
少しでも見やすく、修正しやすくなっていること。
それだけでも、コードの質は少しずつ上がっていくと思います。
まとめ：意味を意識するとコードが読みやすくなる
最初のうちは、divとsectionの違いなんてピンと来ないと思います。
私もずっと「正直どっちでも動くし…」と思っていました。
でも、タグの意味を意識し始めると、
コードが読みやすく・直しやすく・再利用しやすくなっていきます。
今では、「これは意味のあるまとまりかな？」と一度立ち止まるのが習慣になりました。
焦らず、少しずつ“意味のあるコーディング”を身につけていきましょう。
コメント