HTML:divをaで囲むのはありか？

html-div-a

div全体をリンクとして扱いたい場合、1つの方法としてdivをaで囲むというマークアップが考えられると思います。

しかし、この方法はHTMLの文法的に正しいのでしょうか？

結論：HTML5ならあり

結論から言うと、divをaで囲むのはHTML5ならありです。HTML4やXHTMLではなしです。

では、簡単に理由を説明します。

HTML5では、これまでのHTML4などにあったインライン要素やブロックレベル要素という概念がなくなりました。

HTML5以前ではブロックレベル要素の中にインライン要素を入れるというルールがあったのですが、それがなくなったというわけですね。

なぜこのルールがなくなったのかというと、HTML5はセマンティックなマークアップを行うことを目的としており、これらのインライン要素やブロックレベル要素という考え方は特に意味付けに関与しておらず、レイアウトに関しての決まりだったからです。

ただ、個人的にはある程度このインライン要素・ブロックレベル要素という考え方は覚えておいたほうがいいと思います。

HTML5はこれまでのHTMLに比べて自由度が増した分、「何をやってもいい」みたいな考え方が広まっているような気がします。

実際、自分も細かくマークアップについて考えるわけではないので、その気持ちがよくわかります。

しかし、HTMLは正しく文章構造を伝えるための言語ですから、文章構造としておかしなマークアップをしたらダメだと思うんですよね。

HTMLは文法的に正しくない表現でも普通にレイアウトが通ることもあるので、注意が必要だと思います。

divをaで囲むというマークアップをする機会があったのですが、なんとなく気持ち悪くて自分は結局直しました。

これからは、これまでの考え方なんてどんどん覆されていくんだろうなぁ･･･。