div 要素

4.4.13 div 要素

カテゴリー:
フロー・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLDivElement : HTMLElement {};

div 要素は、特別な意味を全く持ちません。これは、その子を表すことになります。class, lang, title 属性を使って、連続した要素のグループに共通のセマンティクスをマークアップすることができます。

ウェブ制作者は、 div 要素を、他に適切な要素がないときなど、最後の手段の要素として見なすことが、強く推奨されます。div 要素の代わりにもっと適切な要素を使うことは、読者にとってアクセシビリティ向上に、ウェブ制作者にとってメンテナンス性の向上につながります。

例えば、ブログ投稿には article を使って、章には section を使って、ページのナビゲーションには nav を使って、フォームコントロールのグループには fieldset を使ってマークアップするのが良いでしょう。

一方で、div 要素は、スタイルを目的としたり、セクションの中で複数の段落を囲んで類似の方法で注釈を付けるには、便利でしょう。次の例では、2 つの段落の言語をセットする方法として、段落要素ごと別々に言語をセットする代わりに、div 要素を使って一度にまとめて言語をセットする例をご覧いただきます:

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element