最終更新日 2021年4月7日

div要素

複数の要素をまとめてグループ化します。div要素自体は特別な意味を持たず、class、id、lang、titleといった属性を使って、グループに共通の意味を持たせることができます。たとえば、スタイルを設定したり、セクション内の複数の段落にまとめて注釈を設定したりすることが可能です。div要素はFlowコンテンツの記述箇所で使用できます。

ただしHTML5では、div要素の使用はその他の要素が利用できない場合にのみに制限することが推奨されており、div要素以外の要素を使う例として、以下があげられています。

ブログの投稿…article要素
ドキュメントの各章…section要素
ページのナビゲーション…nav要素
フォームコントロールのグループ…fieldset要素

より適切な要素があるにもかかわらずdiv要素を使用することは、ドキュメントの保守に関しても、利用者のアクセシビリティの点からも望ましくないとされています。

HTML5での変更点

・align、datasrc、datafld、dataformatasの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ	省略不可	Flowコンテンツを子にできる要素	Flowコンテンツ

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <h1>お知らせ</h1>
    <div class="campaign">
      <h2>ドリンク100円キャンペーン</h2>
      <p>毎週水曜日は、全てのサイズのドリンクが100円です！</p>
    </div>
  </body>
</html>

参考文献：W3C HTML5「4.5.13 The div element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。