HTML Living Standard/div

div 要素

<div> 要素は、汎用のコンテナとして使用される要素です。特定の意味や機能を持たず、スタイル付けやスクリプトで操作するために利用されます。文書の構造化やグループ化に便利ですが、適切な意味を持つ要素が存在する場合はそちらを優先するべきです。

カテゴリ

フローコンテンツ
パルパブルコンテンツ（子孫にパルパブルコンテンツが含まれる場合）

使用される文脈

フローコンテンツが期待される場所

コンテンツモデル

フローコンテンツ

タグの省略

開始タグと終了タグは省略できません。

コンテンツ属性

<div> 要素は、グローバル属性のみをサポートします。

アクセシビリティの考慮事項

適切な意味付け:
- <div> は意味を持たないため、アクセシビリティの観点から、適切な意味を持つ要素（例: <article>, <section>, <nav>）を優先して使用してください。
- <div> のみを使用すると、スクリーンリーダーでの文書の理解が難しくなる場合があります。
ロールの使用:
- 必要に応じて、role 属性を使用して <div> に意味を追加できます。
- 例: <div role="banner"> は、ページのバナーとして機能することを示します。

使用例

基本的な使用例

以下は、<div> を使用してページの内容をグループ化する例です。

<div>
  <h1>私のウェブサイト</h1>
  <p>ここでは、私の好きなものについて紹介します。</p>
</div>

クラスによるスタイルの適用

class 属性を使用してスタイルを適用する例です。

<div class="content">
  <p>この段落は、"content" クラスのスタイルが適用されます。</p>
</div>

JavaScriptでの操作

JavaScriptで <div> 要素を操作する例です。

<div id="message">クリックするとメッセージが変わります。</div>
<script>
  document.querySelector("#message").addEventListener("click",
    () => this.textContent = "メッセージが更新されました！");
</script>

レイアウトのグリッドに使用

<div> 要素を使用して、グリッドレイアウトを作成する例です。

<div class="grid">
  <div class="grid-item">アイテム 1</div>
  <div class="grid-item">アイテム 2</div>
  <div class="grid-item">アイテム 3</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: #ddd;
  padding: 10px;
  text-align: center;
}

注意事項

<div> 要素を過剰に使用すると、HTMLが冗長になり、可読性が低下する場合があります。適切な意味を持つ要素を使用することを優先してください。
スクリーンリーダーなどの補助技術では、<div> 要素自体は意味を持たないため、代わりに適切なARIAロールやラベルを追加することが重要です。