最終更新日

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」外部リンク
HOME