WHATWG HTML 仕様では、div 要素に関して、div 要素を使用しないように努めなければならないと述べています。
それは言います:
作成者は、適切な要素が他にない場合に備えて、最後の手段として div 要素を参照することを強くお勧めします。div 要素の代わりにより適切な要素を使用することで、読者のアクセシビリティが向上し、作成者の保守が容易になります。
では、div の代わりに何を使用すればよいでしょうか?
ドキュメントの構造に適したものを使用してください。記事を書いている場合は、article
要素を使用してください。ドキュメント内でセグメントを定義しますか? section
タグを検討してください。ドキュメントのヘッダーをマークする必要がありますか? 要素を使用しheader
ます。
<article>
<header>
<h1>Foo Title Here</h1>
</header>
<p>Article content can go here.</p>
<p>Note how meaningful this document structure is.</p>
<footer>
<!-- Links, etc. -->
</footer>
</article>
考えてみてください。すべてのドキュメントは意味的に意味のあるタグで始まります。HTML ドキュメントを<html>
タグでラップします。<head>
内部では、 aと aを定義します<body>
。head 内で<title>
、おそらくいくつかの を提供し、いくつかのスタイルシートをまたは<script>
でリンクします。<link>
<style>
誰もがこれらのルールに従っているため、なぜこの一貫性を放棄し<div>
、ドキュメントの重要な部分を定義するような漠然とした半無意味なタグの使用を好むのか、頭がおかしくなります。
あいまいで無意味なタグで構成されたドキュメントとは対照的です。
<div>
<div>
<div>Foo Title Here</div>
</div>
<div>Article content can go here.</div>
<div>Note how meaningful this document structure is.</div>
<div>
<!-- Links, etc. -->
</div>
</div>
かなり無意味ですよね?常に作業に適したツールを使用してください。
参照されている仕様の次の行を読むと、いくつかの例が示されています。
たとえば、ブログ投稿は article を使用してマークアップされ、章は section を使用してマークアップされ、ページのナビゲーション補助は nav を使用してマークアップされ、フォーム コントロールのグループは fieldset を使用してマークアップされます。
したがって、可能であれば、要素よりも意味的な意味を持つ要素を使用する必要がありますdiv
。