【HTML5】a要素の中にdiv要素などのブロックレベル要素は使ってよいのか

先日、以下の記事でa要素の中にdiv要素を使った例を載せた。

tomcky.hatenadiary.jp

実際、これは構造として正しいのだろうか。

結論から言えば、HTML5であれば問題ない。

W3Cのa要素についての説明(英語)。

4.6 Text-level semantics — HTML5

こっちはMDN(日本語)。

developer.mozilla.org

許可されている要素として「記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただしa要素を除く」とある。

というわけで、a要素の中にdiv要素は使って良い、ということになる。

ただ、Vimでsyntasticを導入している場合、デフォルトではa要素の中にdiv要素を入れるとエラーと判断されるようだ(ぼくの環境ではエラーとなった)。

tomcky.hatenadiary.jp

これを解消するには .vimrc に以下を追記する。

let g:syntastic_html_checkers = ['validator']

'validator' となっている部分はここから別のものを選んでも良い。

これを設定しておけばエラーは出なくなる。