HTMLのdivタグとは？使い方・spanやsectionとの違いを初心者向けに解説

HTMLを読んでいると、<div>というタグが何度も出てきます。「とりあえずdivで囲む」と説明されることもありますが、何を囲み、いつ別のタグを選ぶのか迷いますよね。

divは、関連する内容をひとまとまりにする汎用コンテナです。タグ自体は内容の意味を表しませんが、CSSで見た目や配置を整えたり、JavaScriptの操作対象をまとめたりするときに役立ちます。

この記事では、divタグの書き方から、カードを作る実例、spanやsectionとの違い、入れ子で起きやすいミスまで初心者向けに解説します。

HTMLのdivタグとは

divは「division（区分）」に由来するHTML要素で、複数の要素をグループとしてまとめるために使います。MDNでは、フローコンテンツの汎用コンテナと説明されています。

開始タグ<div>と終了タグ</div>で内容を囲むのが基本です。終了タグは省略できません。

<div>
  <h2>お知らせ</h2>
  <p>営業時間を変更しました。</p>
</div>

この例では、見出しと段落を1つのまとまりにしています。ただし、divで囲んだだけでは、内容の意味や特別なデザインが自動で追加されるわけではありません。

divだけでは見た目はほとんど変わらない

divは、CSSを適用するための箱を用意する要素と考えると分かりやすいです。ブラウザの標準スタイルでは通常ブロックとして表示されますが、枠線や背景色は付きません。

見た目を変えるには、class属性などで名前を付けてCSSから選びます。

<div class="notice">
  <h2>お知らせ</h2>
  <p>営業時間を変更しました。</p>
</div>

.notice {
  max-width: 480px;
  padding: 24px;
  border: 2px solid #2563eb;
  border-radius: 12px;
  background-color: #eff6ff;
}

CSSを追加すると、見出しと文章をまとめたお知らせカードになります。divを1つのまとまりとして選べるため、内側の要素へ同じ余白や背景を付けやすくなります。

divタグを使う主な場面

• 複数の要素へ共通の背景色、枠線、余白を付ける
• FlexboxやGridで複数の要素を並べる
• ページ全体の最大幅を決めるラッパーを作る
• JavaScriptで開閉・移動・更新する範囲をまとめる
• 内容に合う意味付き要素がない部分をグループ化する

ポイントは、「divを置くこと」ではなく、「まとめた範囲へ何をしたいか」を先に考えることです。目的のないdivを増やすと、HTMLの構造が読みにくくなります。

divでプロフィールカードを作る

divの役割を理解するため、画像、名前、説明文、リンクを1つのカードにまとめてみましょう。まずはHTMLを書きます。

<div class="profile-card">
  <img
    class="profile-card__image"
    src="profile.jpg"
    alt="山田太郎のプロフィール写真"
  />
  <div class="profile-card__body">
    <h2>山田太郎</h2>
    <p>Web制作を学習しています。</p>
    <a href="/profile/">詳しいプロフィール</a>
  </div>
</div>

外側のprofile-cardはカード全体、内側のprofile-card__bodyは文章部分をまとめています。divは入れ子にできるので、役割ごとにまとまりを分けられます。

次にCSSで横並び、余白、背景を設定します。

.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  padding: 24px;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
}

.profile-card__image {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.profile-card__body h2 {
  margin-top: 0;
}

display: flex;は、divの子要素である画像と文章部分を横に並べます。gapは、その2つの間隔です。

画面が狭いときは縦並びに変えると、スマートフォンでも読みやすくなります。

@media (max-width: 600px) {
  .profile-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

Flexboxの仕組みやdiv以外のdisplay値も確認したい方は、次の記事を参考にしてください。

class属性とid属性の使い分け

divへ名前を付けるときは、主にclass属性とid属性を使います。どちらもCSSやJavaScriptから要素を選ぶ手がかりになります。

<div class="card">1枚目のカード</div>
<div class="card">2枚目のカード</div>

<div id="contact">お問い合わせ</div>

同じ見た目のカードが複数ある場合はclassが適しています。ページ内で1つしかないお問い合わせ位置は、idで識別できます。

属性の書き方やCSSセレクターを詳しく確認したい方は、次の記事も見てください。

divと意味のあるHTML要素の違い

divには「ナビゲーション」「記事」「見出し」といった内容上の意味がありません。内容に合うHTML要素があるなら、divではなくその要素を選びます。

変更前は役割が分かりにくい

<div class="header">
  <div class="nav">...</div>
</div>

<div class="main">...</div>

<div class="footer">...</div>

クラス名を読めば推測できますが、HTML要素そのものから役割は伝わりません。

変更後はHTMLから役割が分かる

<header>
  <nav aria-label="メインナビゲーション">...</nav>
</header>

<main>...</main>

<footer>...</footer>

意味のある要素を選ぶと、開発者が構造を読みやすくなり、ブラウザや支援技術にも役割を伝えやすくなります。これをセマンティックなHTMLと呼びます。

divを使うとSEOで不利になるとは限らない

divを使っただけで検索順位が下がる、意味付き要素へ変えれば順位が上がる、と単純には言えません。検索順位だけを理由に、すべてのdivを置き換える必要はありません。

一方、適切な要素を使うと構造と役割が明確になり、アクセシビリティや保守性を改善できます。内容に意味がある部分は意味付き要素、見た目や配置のための汎用グループはdiv、と目的で選びましょう。

sectionを使う基準やdivとの詳しい違いは、次の記事で解説しています。

divタグとspanタグの違い

divとspanは、どちらも内容固有の意味を持たない汎用要素です。大きな違いは、囲める内容と既定の表示方法にあります。

divは複数の要素をまとめる

<div class="product-card">
  <img src="chair.jpg" alt="木製の椅子" />
  <h2>木製チェア</h2>
  <p>価格：8,800円</p>
</div>

画像、見出し、段落を1つの商品カードとしてまとめています。divの前後は通常改行され、縦方向に積まれます。

spanは文章の一部分をまとめる

<p>
  期間限定で<span class="price">20%オフ</span>です。
</p>

.price {
  color: #dc2626;
  font-weight: 700;
}

20%オフだけをspanで囲み、文章の流れを保ったまま色と太さを変えています。文章の一部に意味を持たせたい場合は、strongやemなどが適切なこともあります。

divタグの入れ子を書く方法

divの中にdivを書くことを入れ子、またはネストと呼びます。外側から順番に開始し、内側から順番に閉じるのがルールです。

<div class="outer">
  <div class="inner">
    <p>内側の内容</p>
  </div>
</div>

インデントを付けると、どの終了タグがどの開始タグに対応するか分かりやすくなります。

終了タグの順番を交差させない

次のHTMLは、divを閉じる前に外側の要素を閉じており、入れ子の順番が交差しています。

<!-- 間違った例 -->
<div>
  <p>文章
</div>
  </p>

ブラウザがHTMLを自動補正するため表示できる場合もありますが、意図しないDOM構造になります。HTML検証ツールやエディターの対応タグ表示を使って確認しましょう。

pタグの中へdivタグを入れない

p要素の中へdiv要素は入れられません。ブラウザはdivの直前でpを自動的に閉じるため、書いたHTMLと実際のDOMが変わります。

<!-- 間違った例 -->
<p>
  文章の途中
  <div>大きなまとまり</div>
</p>

文章の一部分を囲むならspanを使い、大きなまとまりを作るdivはpの外側へ置きます。

divを使いすぎないための判断手順

1. その範囲にnav、article、sectionなどの意味があるか考える
2. 意味に合うHTML要素があれば、その要素を使う
3. 見た目、配置、JavaScript操作のためだけにまとめるならdivを使う
4. 親要素だけでCSSを適用できるなら、不要なdivを追加しない

divが多いこと自体が間違いではありません。部品の見た目やレイアウトを作るために必要なら、目的が分かるクラス名を付けて使います。

反対に、何層も目的不明のdivが続く状態は「div soup」と呼ばれることがあります。HTMLを読み直し、同じ見た目をより少ない階層で作れないか確認しましょう。

divタグでよくある質問

divタグは必ず使いますか？

必須ではありません。内容に合う意味付き要素や既存の親要素だけで構造とデザインを作れるなら、divを使わなくても問題ありません。

divタグは改行タグですか？

改行のためのタグではありません。ブラウザの既定CSSで通常display: block;になるため前後が改行されたように見えますが、目的は内容のグループ化です。

divタグの横幅と高さはどう決まりますか？

既定のブロック表示では、横幅は利用可能な領域へ広がり、高さは内容に合わせて決まります。必要に応じてCSSのwidth、max-width、min-heightなどを指定します。

divタグを中央寄せするにはどうしますか？

幅を設定したdiv自身を左右中央へ置くなら、margin-inline: auto;を使えます。中の要素を中央へ置く場合は、FlexboxやGrid、text-alignなど、対象に合う方法を選びます。

.container {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

divタグの使い方まとめ

• divは、複数の要素をまとめる汎用コンテナ
• 開始タグと終了タグで内容を囲み、終了タグは省略しない
• classやidを付けると、CSSやJavaScriptから選びやすい
• 内容に合う意味付き要素がある場合は、divより先に検討する
• divは大きなまとまり、spanは主に文章の一部分を囲む
• 入れ子は内側から閉じ、p要素の中へdivを入れない

最初は「見出しと段落を1つのカードにする」例から試してみてください。divで範囲をまとめ、classを付け、CSSで背景と余白を加える流れを体験すると役割がつかめます。

div以外のタグも目的別に確認したい方は、基本タグをまとめた次の記事へ進んでください。

仕様を詳しく確認するときは、MDNのdiv要素、span要素、セマンティクス、WHATWGのdiv要素とspan要素も参考になります。