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

仕様書の該当箇所

4.4.15 The div element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ