【HTMLリファレンス】divタグの使い方や意味とは？コンテンツを仕分けるコツ

HTMLの<div>要素はコンテンツの区分を作るための要素です。
要素をグループ化したり階層化するために使う汎用的なタグで、その使い所の広さからあらゆる箇所で使われておりほとんどのHTMLドキュメントで最も多く登場します。

基礎知識

<div>要素は純粋なコンテナーです。
要素自体がもつ固有の意味はなく「HTML要素のグループ化や階層化」のために使用します。
その利便性の高さからあらゆるシーンで使われ、HTMLをコーディングしていくなかで最も多く書くことになるでしょう。

コンテンツのグループ化

<div>要素を使って、並列に位置する要素に親要素を加え階層を構造的に整ったグループにするコードのイメージは以下のようになります。

<div>
  <p>夏</p>
  <ul>
    <li>花火</li>
    <li>セミ</li>
    <li>入道雲</li>
  </ul>
</div>

<div>
  <p>冬</p>
  <ul>
    <li>雪</li>
    <li>クリスマス</li>
    <li>初詣</li>
  </ul>
</div>

<div>要素自体に文書構造を定義する役割は無いので、<div>タグで好きなように囲んでも文書構造を汚してしまうことはありません。

要素の集合体にスタイルを適用する

<div>要素を使う目的でもッとも多いのはCSSでのスタイリングをより効率的かつ堅牢にすることです。

要素をグループ化し、そのグループに対してスタイルを適用することでグループ自体と子要素にまとめてスタイルを付け加えることができます。

<!-- 
divでグループ化して
class属性でスタイルを加えることで
グループ内の子要素にのみ
スタイルを継承させることができる
-->

<div class="text-color-red">
	<h2>りんご</h2>
	<p>甘みと酸味がある赤色の果実</p>
	<ul>
		<li>りんごジャム</li>
		<li>アップルパイ</li>
		<li>りんご飴</li>
	</ul>
</div>

.text-color-red {
	color: red;
}

豆知識

由来

<div>要素は「分割、区切り」などの意味をもつdivisionディビジョンから由来しています。

HTML要素は<div>に限らず他の要素も文書構造を定義することに加えて、区切ったり分割する機能をもっていますが<div>はこれに特化したタグです。

注意

より適切な要素がある場合はそちらを使うべき

<div>は汎用的ではありますが万能ではありません。
コンテンツに対して<div>より適切な要素タグが他にある場合はそちらのタグを使いましょう。

HTMLはマークアップ（意味づけ）言語なので、すべての要素に適切な意味を与えてこそHTMLの役割を果たします。
<div>は「要素自体の固有の意味は無い」ゆえに「どこでも使えるが意味づけができない」という特性を持っていることを理解しておくと使いどころを判断しやすくなります。

閉じタグの入れ忘れ、消し忘れには注意

<div>要素は頻出度が高いので開始タグに対応する終了タグを間違えてしまったりすることが多々あります。
特にHTML初学者の方は「終了タグの削除忘れ」「削除した終了タグが別の<div>要素の終了タグだった」ということがよくあります。

<div>タグを削除した直後にウェブページのレイアウトが崩れた時などには一度チェックしてみましょう。

よくある質問