HyperText Markup Language div element.
div要素は、セマンティクス上、特定の意味を持ちませんが、何かしらのセマンティクス上、区別したい領域やグルーピングのために使います。
また、class属性を使って、スタイルシートのフックとして利用する事も可能です。
div要素でコンテンツをグルーピングする際には、他に適切な要素がないかを検討しましょう。もしセクションであれば section要素、記事であれば artcile要素、ナビゲーションであれば nav要素、フォーム・コントロールのグルーピングであれば fieldset要素が適しています。このように事前に用意された要素では表す事が出来ない場合にのみ、div要素を使うようにしましょう。
div要素のマークアップ例
<section>
<hgroup>
<h1>記事タイトル</h1>
<h2>サブタイトル</h2>
</hgroup>
<div class="story">
記事の内容
</div>
</section>
この例では、１つのセクションの本文の領域を div要素の中に入れています。
HTML5では、セクション、つまり見出しと本文の全体は、section要素や article要素でマークアップする事が出来ます。そして、見出しに相当する部分は hgroup や header要素が使えます。しかし、セクションから見出し部分を除いた本文の領域というセマンティクスを持った要素は規定されていません。そのため、ここでは、div要素を使ってマークアップしているのです。
もし記事本文の領域だけをスタイルしたい場合は、この div要素に class属性を加えて、スタイルシートのフックにする事が出来ます。
div {
display: block;
}