<div>要素

<div>要素の定義

英語で「区分」を意味する”division”より。
<section> 要素や、<article> 要素などよりも汎用的な要素のまとまりを表す際に使われます。
<div> 要素はあくまでも、文書の「意味的なまとまり」を表すためのものなので、標準では見た目は何も変わりません。

W3Cでは「<div> 要素は、他に適切な意味的要素(<article> や <nav> など)がない場合に限り使用してください。」と注意喚起がされていますが、<div>要素のほうが登場が早かった経緯もあり、<article> 要素などを使うべきような箇所でも<div>要素が使用されているページは多数存在します。
<div>要素を必要以上に多用したとしても、Webブラウザでの表示上では特に問題は起きませんが、「意味的なまとまり」と適切に表すことは、ページのメンテナンス性の向上にも役立ちますし、SEO的にも影響が出てくる(もしくはすでに出ている)可能性もあります。

子要素として使用できるもの

フローコンテンツを記述できます。

親要素として使えるもの

フローコンテンツを受け入れるすべての要素。

許可されている ARIA ロール

すべて

DOMインターフェース

HTMLDivElement

属性

グローバル属性のみが指定できます。

サンプル

以下の例では、他の文書の「意味的なまとまり」を表すための要素も合わせて作成した例を示します。

See the Pen KKKXxdX by Masahiko Iwakiri (@m-iwakiri) on CodePen.


 
 

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?: https://caniuse.com/#home

コメント

タイトルとURLをコピーしました