HTML
<section>と<div>って何が違うの？タグの使い分けをわかりやすく解説！
【初心者向け】<section>と<div>って何が違うの？タグの使い分けをわかりやすく解説！
この記事でわかること
- <section>と<div>の基本的な違い
- どうやって使い分ければいいの？
- 実際のHTMLコード例付き！
<section>と<div>は何が違うの？
どちらも「グループ化するためのタグ」ですが、
意味があるか・ないかが大きな違いです。
<section>
| 役割 | 特徴 |
|---|---|
| 意味のあるまとまりを表す | 「このまとまりには意味があるよ！」と伝える |
| 役割 = 意味のあるまとまりを表す | 特徴 = 「このまとまりには意味があるよ！」と伝える |
|---|
<div>
| 役割 | 特徴 |
|---|---|
| 意味のないただの箱 | 見た目を整えるためだけのグループ化 |
| 役割 = 意味のないただの箱 | 特徴 = 見た目を整えるためだけのグループ化 |
|---|
もっとわかりやすく言うと？
<section>は、内容に「タイトル」が付けられるものに使う
例えば、
- 「会社概要」セクション
- 「お問い合わせ」セクション
- 「最近の投稿」セクション
など、ひとまとまりのテーマがあるときに使います。
よくある使い方
<section>
<h2>会社概要</h2>
<p>私たちの会社は〜〜〜</p>
</section>
ポイント！
- 中に必ず見出し（<h2>や<h3>など）を入れるのが基本！
- ページ構成がわかりやすくなるのでSEOにも効果的！
<div>は、意味を持たせず、ただの「箱」として使う
例えば、
- デザイン調整用にまとめたい
- 横並びにしたいグループがある
- スタイル（CSS）を付けるためだけにグループ化したい
みたいなときに使います。
よくある使い方
<div class="container">
<div class="card">カード1</div>
<div class="card">カード2</div>
</div>
ポイント！
- 内容に特別な意味はない
- スタイル調整やレイアウト整理用
ざっくりまとめ
- 意味があるまとまり → <section>を使う
- 見た目だけまとめたい → <div>を使う
迷ったら、
「このグループに見出しを付けて説明できるか？」
を考えると判断しやすいです！
よくある質問
Q. <section>だけ使ってればいいの？
答え：NO！
レイアウト用の細かい調整には、やっぱり<div>が必要です。
両方をバランスよく使い分けるのがコツ！
最後にひとこと
HTMLを書くときは「人にも機械にもわかりやすいコード」を意識すると、
- SEOにも強い
- 保守もしやすい
- デザインの幅も広がる
いいことづくしです！
これをきっかけに、タグの正しい使い分けにチャレンジしてみましょう！
