<div>: コンテンツ分割要素

HTML のコンテンツ分割要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

コンテンツカテゴリ	フローコンテンツ, 知覚可能コンテンツ
許可されている内容	フローコンテンツ。または (WHATWG HTML において) 親要素が `<dl>` である場合: 1つ以上の `<dt>` 要素と、それに続く1つ以上の `<dd>` 要素、さらに任意で `<script>` 要素や `<template>` 要素が混在。
タグの省略	不可。開始と終了タグの両方が必要。
許可されている親要素	フローコンテンツを受け入れるすべての要素。または (WHATWG HTML において) `<dl>` 要素。
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLDivElement`

属性

この要素はグローバル属性を持ちます。

メモ: align 属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 CSS グリッドや CSS フレックスボックスを使用して <div> 要素をページの中央に配置したりしてください。

使用上の注意

<div> 要素は、他に適切な意味的要素（<article> や <nav> など）がない場合に限り使用してください。

例

単純な例

<div>
  <p>Any kind of content here. Such as
  &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>

結果はこのようになります。

スタイル付けを行う例

この例では CSS を用いて <div> にスタイルを適用することで、影付きのボックスを作成します。なお、 <div> 要素に class 属性を使用して、 "shadowbox" という名前のスタイルを要素に適用します。

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

結果

仕様書

仕様書	状態	備考
HTML Living Standard <div> の定義	現行の標準	最新のスナップショットから変更なし。
HTML5 <div> の定義	勧告	`align` を廃止
HTML 4.01 Specification <div> の定義	勧告

ブラウザーの互換性

BCD tables only load in the browser