概要

<div> は、HTMLにおいて「汎用のコンテナ（ブロック要素）」として使用されるタグです。
意味的な役割を持たないため、主にレイアウトやスタイルのグルーピングを目的として使われます。

基本的な使い方

See the Pen paddingについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<div class="container">
  <h2>セクションタイトル</h2>
  <p>本文テキストが入ります。</p>
</div>

上記のように、複数の要素をグループ化するための囲いとして使われます。
CSSと組み合わせることで、スタイルの適用やレイアウト調整に活用できます。

出力される内容の例

<div class="container">
  <h2>セクションタイトル</h2>
  <p>本文テキストが入ります。</p>
</div>

役割とメリット（定義リスト形式）

構造の整理

複数の要素をグループ化して構造を整理し、CSSやJavaScriptから扱いやすくします。

スタイリングの対象

クラス名やIDを指定することで、範囲を限定してスタイルを適用できます。

再利用性の向上

共通の構造に<div>を使うことで、テンプレートやコンポーネント化が容易になります。

JavaScriptとの連携

対象要素のグルーピングにより、JavaScriptによる動的処理がしやすくなります。

注意点

• <div> は意味を持たないため、セマンティックなHTML構造を意識する場合は <section> や <article> などの使用を検討しましょう。
• 濫用すると「div地獄」と呼ばれるコードの可読性低下を招くため、使いすぎに注意が必要です。
• コンテンツの意味や文脈に応じて、より適切なタグ（<main>、<nav>、<aside> など）を優先することが望ましいです。

まとめ

<div> はHTMLで最もよく使われる汎用コンテナタグで、主に構造のグルーピングやスタイル適用に利用されます。
意味は持たないため、適切な使い所を見極めて、セマンティックなタグとのバランスを取ることが重要です。