div 要素フロー・コンテンツをまとめる
div 要素はフロー・コンテンツをまとめます。div 要素自体は特別な意味を持ちませんが、class 属性、lang 属性、title 属性などを付与して、内包するフロー・コンテンツに対する意味づけを行うことができます。
div 要素は、他に適切な要素がない場合にのみ使用すべきです。例えば、記事をマークアップするのであれば、article 要素を使用できますし、セクションであれば、section 要素、ヘッダーであれば header 要素、ナビゲーションであれば nav 要素などがそれぞれあります。まずは適切な要素選択をした上で、div 要素によるグルーピングが必要であれば使用します。
div 要素の仕様
- カテゴリ
- コンテンツモデル
-
- 要素が dl 要素の子である場合は、1個以上の dt 要素の後に 1個以上の dd 要素が続き、必要に応じてスクリプト支援要素と混在する
- この要素を使用できる文脈
- フロー・コンテンツが期待される場所
- dl 要素の子として
- この要素で使用できる属性
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>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |