<div></div>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ

div要素は、特定の範囲(フロー・コンテンツ)を1つのグループとしてまとめます。(この要素自体は特別な意味を持ちません)


<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要素(ただし、それがメインコンテンツでない場合に限る)
HTML5における変更点

使用例

class属性を使ってスタイルを適用させた例

<!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>

表示例

段落のテキストです。

段落のテキストです。

段落のテキストです。

段落のテキストです。

lang属性を使って言語情報を示した例

<!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.

段落のテキストです。

段落のテキストです。