第19章 div は本当に悪なのか
この章では、「div は悪」という言い方を、そのまま要素の価値判断としてではなく、意味を持たせられる場所まで汎用コンテナへ崩してしまう問題として整理します。ゴールは、div を見たときに「使った時点で負け」と反応するのではなく、「ここに本当に固有の意味要素が必要だったのか」を考えられるようになることです。
前章では、table を巡る善悪が、用途の違いを落とした標語だと見ました。この章でも同じく、要素名だけでは決められない話を扱います。次章では、見た目の要素として語られがちな b がなぜ残ったのかを見ます。
19.1 div soup が批判される理由
div は、ほとんど意味を持たない汎用コンテナです。だからこそ便利で、どこにでも置けます。しかしその便利さが行きすぎると、見出し、ナビゲーション、主要領域、補足領域まで全部が div だらけになり、文書構造の手がかりが薄くなります。
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
この種の書き方が div soup と呼ばれて嫌われるのは、見た目が冗長だからだけではありません。そこに何があるのかを、要素自体があまり伝えなくなるからです。header や nav や main のような要素で渡せる意味まで、全部を無地の箱へ押し込んでしまうと、HTML が持てる構造上の情報が減ります。
しかも現代では、テンプレートやコンポーネントの都合で div が増えやすい。だから div soup は、手書き HTML の古い癖というより、いまの実装でも油断すると起きる問題です。便利な箱が増えるほど、「本当にここは無地の箱でよいのか」を意識しないと、意味はすぐ薄くなります。
19.2 それでも div が必要な場面は多い
ただし、ここで div 自体を悪者にすると、話は逆に雑になります。現実の UI は、意味要素だけですべて組み切れるほど単純ではありません。
スタイリングのためのまとまり、レイアウト上の包み、JavaScript のフック、再利用部品の外枠。そうした場面では、div が最も自然です。意味を足すべきではない箱にまで、無理に意味要素を当てはめるほうが不自然になることもあります。
たとえば、カード部品の内側で余白や境界線をまとめてかけたい、複数要素をまとめて並べたい、スクリプトがまとめてつかむ外枠が欲しい。こうした場面では、「ここに新しい文書上の役割がある」とまでは言えません。だから div のほうが素直です。
つまり問題は、div を使うことそのものではありません。固有の意味を持つべき場所を、何となく全部 div で済ませてしまうことです。汎用コンテナが悪いのではなく、意味の切り分けを放棄したまま使うことが問題になります。
19.3 セマンティクスは「固有要素があれば使う」から始まる
ここで必要なのは、div を禁止することではなく、順番を逆にしないことです。まず「ここに意味のある要素があるか」を考える。header nav main section article などで表せるなら、そちらを使う。そのうえで、意味を増やす必要がないまとまりには div を使う。この順番なら、div は敵ではなく、汎用要素として適切な位置に収まります。
この考え方は、第18章の table とよく似ています。table も要素名だけで善悪を決められなかったように、div も要素名だけで良し悪しは決まりません。何を伝えたいかに対して、固有要素で足りるのか、汎用コンテナが自然なのかを見分ける必要があります。
だから div への批判が妥当になるのは、「この場所にはもっと意味のある要素があったのに、全部を無地の箱へ落としてしまった」ときです。逆に、意味を持たせる必要のないラッパーまで責めると、セマンティクスを誤解した議論になります。
19.4 実務では「何を伝えたい箱か」を問う
実務で div を見るときは、「div がある」という事実より先に、「この箱は何を伝えるためにあるのか」を見るほうが有効です。文書構造の役割を持つなら固有要素を検討する。役割ではなく単なるレイアウトや包みなら div でよい。この判断ができれば、div soup への違和感も、単なる美意識ではなく説明可能なものになります。
この章で言いたいのは、「div は使うな」という標語ではありません。汎用要素が悪いのではなく、意味を持つ場所まで汎用化してしまうことが問題です。そうすれば、「div は悪」という言い方が、どこまで本当で、どこから雑になるのかを整理できます。次章では、見た目だけの要素だと思われがちな b が、なぜ今も仕様の中に残っているのかを見ます。