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

html-div-a

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

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

スポンサーリンク

結論:HTML5ならあり

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

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

HTML5ではインライン要素やブロックレベル要素の概念がなくなった

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

ブロックレベル要素
文章構成の際に大きな区切りとなる要素
インライン要素
ブロックレベル要素の内容として、文章の一部に使われる要素

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

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

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

文章構造がでたらめなマークアップはもちろんNG

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

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

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

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

さいごに

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

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

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*