なぜ全部div要素じゃダメなのか

div要素があれば何でもできる？

HTMLに慣れ始めたころに、Webサイトの大部分はdiv要素だけで実装できると気付きました。

例えば、

• リストを作る際にわざわざul要素の中でli要素を並べなくても、div要素を縦並びにすれば同じことを実現できます。

• テキストの一部を強調する場合も、strong要素を使わなくても、div要素で囲んだ上で「インライン要素にする」「中のテキストを太字にする」スタイルを充てれば同じことを実現できます。

要するに、表現が異なる箇所ごとにdiv要素で囲い、特別なスタイル充てを施せば、目標の見た目の大体は実現できます。

（機能をdiv要素だけで実現するのは難しいです。それでも、リンクのためのa要素とか、動画のためのvideo要素くらいで十分そうです。）

多くのユーザーはWebサイトの表面部分（UI）にしか関心がありません。したがって、HTML文書がどう記述されていようが関係ないように思えます。

なぜul要素やstrong要素は存在するのでしょうか。

なぜ全部div要素じゃダメなのか

これを理解するために、開発者以外にHTML文書に関心を持つ存在がある、ということを把握する必要があります。

例えば、スクリーンリーダー（視覚障がい者などのためにコンテンツ読み上げをするソフト）です。

スクリーンリーダーは、要素に込められた意味を抽出し、特別扱いする機能を持ちます。その例を2つ挙げてみます。

Case1: テキストを強調して読み上げる
　
開発者がstrong要素で囲んだ個所を、強調して読み上げてくれるかもしれません。
しかしdiv要素で囲んでclass属性で太字スタイルを充てていたとしたら、そこに込められた「強調している」という意味を解釈してもらえなくなります。

Case2: リンク集の読み上げを回避する
　
nav要素で囲まれたリンク集は、意味的に強くないので読み上げを回避するように取り計らってくれるかもしれません。
しかしdiv要素で囲んでリスト化しているだけだとしたら、そこに込められた「ナビゲーション用でメインコンテンツではない」という意味を解釈してもらえなくなります。

div要素は特別な意味を持たない要素です（強いて言えば、「1つのまとまりである」という意味）。スクリーンリーダーが特別な解釈をする可能性は低いでしょう。

開発者が特別な意味を持つ要素を積極的に活用することで、コンテンツがスクリーンリーダーからの恩恵を受けやすくなります。

スクリーンリーダー以外の例としては、SEO（検索エンジン）があります。

SEOは、HTML文書から「Webサイトが最も提供したいこと」を汲み取ることで、ユーザーの求めているコンテンツを検索上位に出せるようにしています。

そのため、Web開発者は特別な意味を持つ要素の中に「Webサイトが最も提供したいこと」を込めることで、多くのユーザーにアクセスしてもらおうと試みます。

セマンティクス

コードの中に適切な意味を含ませて文書構造・構成要素の意味を明確にすることをセマンティクスと言います。

HTML文書の中で特別な意味を持つ要素を使用することは、ちょうどセマンティクスに当たります。

結論

div要素だけで実装してしまうと、HTML文書に込められた意味を外部のツールが汲み取りにくくなります。

セマンティクスを意識して、多くの人が有効にコンテンツを利用できるようにしましょう！