使うべき場面
-
ただの箱が必要
-
CSSのためにまとめたい
-
JavaScriptで扱いやすくしたい
-
意味のあるタグが当てはまらない
使わないほうがいい場面
-
メニューなら
nav -
ページ
-
上部なら
header -
メイン内容なら
main -
独立した記事なら
article -
明確なセクションなら
section
WHATWGは、sectionは汎用コンテナではなく、スタイリングやスクリプト都合だけなら div を使うべきと説明しています。逆に言うと、意味があるなら section などを使うべきということです。
例
悪い例
<div class=“menu”>
<a href=“#”>ホーム</a>
<a href=“#”>会社情報</a>
</div>
<a href=“#”>ホーム</a>
<a href=“#”>会社情報</a>
</div>
より良い例
<nav>
<a href=“#”>ホーム</a>
<a href=“#”>会社情報</a>
</nav>
<a href=“#”>ホーム</a>
<a href=“#”>会社情報</a>
</nav>