div 要素

div 要素はフロー・コンテンツをまとめます。div 要素自体は特別な意味を持ちませんが、class 属性、lang 属性、title 属性などを付与して、内包するフロー・コンテンツに対する意味づけを行うことができます。

div 要素は、他に適切な要素がない場合にのみ使用すべきです。例えば、記事をマークアップするのであれば、article 要素を使用できますし、セクションであれば、section 要素、ヘッダーであれば header 要素、ナビゲーションであれば nav 要素などがそれぞれあります。まずは適切な要素選択をした上で、div 要素によるグルーピングが必要であれば使用します。

<!-- 記事内で英語による文章を挿入した場合などにその部分をまとめた例 -->
<article>
 <h1>英語での表現について</h1>
 <p>
  私は昨日、考えたんだが、日本語で書いた文章を…
 </p>
 <p>
  さて、ここまで書いてきたことを英語で表現するにはどうすればいいか。
  まずは単純に翻訳してみたものを下記に示してみよう。
 </p>
 <div lang="en">
  <p>English Text…</p>
  <p>English Text…</p>
  <p>English Text…</p>
 </div>
 <p>
  このままだとちょっとわかりにくい英語になっているかもしれない…
 </p>