ミス1 divだらけにする
<div>
<div>
<div>
<div>内容</div>
</div>
</div>
</div>
<div>
<div>
<div>内容</div>
</div>
</div>
</div>
これは俗に div地獄 と呼ばれます。
構造が読みにくく、保守しにくくなります。
ミス2 意味のあるタグを使わない
全部 div で書くと、HTMLの意味が消えます。
悪い例
<div class=“header”>…</div>
<div class=“menu”>…</div>
<div class=“content”>…</div>
<div class=“footer”>…</div>
<div class=“menu”>…</div>
<div class=“content”>…</div>
<div class=“footer”>…</div>
より良い例
<header>…</header>
<nav>…</nav>
<main>…</main>
<footer>…</footer>
<nav>…</nav>
<main>…</main>
<footer>…</footer>
ミス3 divだけでデザインが変わると思う
見た目を変えるのはCSSです。divは箱です。
ミス4 pの代わりに何でもdiv
文章の段落なら p を使うべきです。
一方でWHATWGは、複数の構造段落を1つの論理的まとまりとして包みたい場合に div を使う例も示しています。つまり、段落そのものの代用ではなく、段落群のラッパーとして使うのが自然です。
まとめ
divの役割
-
汎用の箱
-
グループ化
-
CSSを当てるため
-
JavaScriptで操作するため
divの限界
-
自分では意味を持たない
-
SEOや支援技術向けの意味づけは弱い
-
乱用するとHTMLが読みにくくなる
最低限の覚え方
-
divは箱 -
見た目はCSSで変える
-
意味があるなら専用タグを優先
-
意味がないなら
divを使う