<div></div>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 / dl要素の子要素として |
| 内容 | dl要素の子要素でない場合：フロー・コンテンツ / dl要素の子要素の場合：1つ以上のdt要素とそれに続く1つ以上のdd要素、必要に応じてスクリプトサポート要素 |
div要素は、特定の範囲を1つのブロックとしてグループ化します。この要素はコンテナとして機能するたけで、それ以外の特別な意味は持ちません。
- テキストの範囲を指定したい場合は、この要素ではなくspan要素を使用します。
<div>
グループ化します
</div>
div要素は、主にclass属性、id属性、lang属性などと併せて使用することになります。
例えば、次のような用途に使用することができます。
- class属性を使い、スタイルの適用範囲を設定する
- id属性を使い、スクリプトの対象となる範囲を設定する
- lang属性を使い、特定範囲の言語情報を示す
他の要素も検討してみる
この要素は、他に適した要素がない場合の、最終手段としての要素とされています。他に適切な要素がある場合は、そちらを使用することが強く推奨されています。
- 以下の表は、TAG indexの考えを反映したものです。必ずしも正しいとは限りませんので、ご利用の際にはご注意ください。（参考程度に見てください）
| 目的 | 適した要素 |
|---|---|
| セクションを作りたい | 1つの完結した記事ならばarticle要素 |
| 記事内の章ならばsection要素 | |
| ヘッダやフッタを作りたい | ヘッダはheader要素 |
| フッタはfooter要素 | |
| メインコンテンツの領域を作りたい | メインコンテンツを表すmain要素 |
| ナビゲーションの領域を作りたい | そのリンクメニューがナビゲーションならばnav要素 |
| メインカラムを作りたい | メインカラムの内容がメインコンテンツのみで構成されている場合はmain要素、それ以外はdiv要素 |
| サイドバーを作りたい | サイドバーの内容が補足的な情報ならばaside要素、ナビゲーションのみを含むならnav要素、それ以外はdiv要素 |
| 写真の掲載スペースを作りたい | 本文から参照される内容であればfigure要素、記事内の章として作りたい場合はsection要素、その掲載スペースがメインコンテンツならばmain要素 |
| 広告の掲載スペースを作りたい | 本文中ならaside要素、aside要素で作られたサイドバー内ならsection要素 |
| 関連リンクのスペースを作りたい | footer要素（ただし、それがメインコンテンツでない場合に限る） |
- 旧HTMLからの変更点
-
- HTML5：align属性が廃止されました。
- HTML5.2：dl要素内に配置できるようになりました。
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<style>
div.example {
padding: 10px;
border: 1px #ff0000 solid;
}
div.example p {
margin: 0;
}
</style>
</head>
<body>
<div class="example">
<p>段落のテキストです。</p>
<p>段落のテキストです。</p>
</div>
<p>段落のテキストです。</p>
<p>段落のテキストです。</p>
</body>
</html>
- 表示例
-
段落のテキストです。
段落のテキストです。
段落のテキストです。
段落のテキストです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>文書のタイトル</title>
</head>
<body>
<div lang="en">
<p>a text in a paragraph.</p>
<p>a text in a paragraph.</p>
</div>
<p>段落のテキストです。</p>
<p>段落のテキストです。</p>
</body>
</html>
- 表示例
-
a text in a paragraph.
a text in a paragraph.
段落のテキストです。
段落のテキストです。