基礎12. div要素-タグをグループ化する

div要素

ブロックレベルの要素です。
display: block;が初期値です。
div要素は、分割・区切り（division）という意味で、主に複数の要素をまとめてグループにしたり、ブロック分けすることで、CSSを使ったレイアウトや装飾をしやすくするために使用します。
bodyタグ内に使用できるタグは、すべて入れ子にできるのが特徴です。

意味付けはありません。
※意味づけのないインラインの要素には、spanがあります。
divと違って、意味づけを行いたい場合は、HTML5で追加されたarticleやsectionなどを使用します。
divに代わるタグについては、「応用48. HTML5で追加された要素 – header,footer,main,nav, article,aside,section」で紹介します。

<h1>見出し1</h1>
<div>
  <h2>見出し2</h2>
  <p>段落テキスト</p>
</div>
<div>
  <h2>見出し2</h2>
  <p>段落テキスト</p>
  <div>
    <h3>見出し3</h3>
    <p>段落テキスト</p>
  </div>
</div>

divタグは、よく使用するタグのため、数が増えやすく、構造が分かりづらくなります。
インデントやコメントアウトをうまく使い、見やすく分かりやすいコードを心がけることが重要です。

注意点として、divタグは、意味付けがないので、テキストやリンクは直接囲まず、pタグなど意味付けを行うタグを入れ子にして記述するようにしましょう。

あまり良くない例

<div>
  <a href="company.html">会社概要</a>
</div>

適切な例

<div>
  <p><a href="company.html">会社概要</a></p>
</div>

練習用ファイル

下記のbase-html01.zipをダウンロードして実際に記述してみましょう。
base-html01

まとめ

• div要素は、意味付けがない。
• divタグは、グループやブロック分けに使用する。
• divタグは、どんなタグでも入れ子にすることができる。