aタグの中にdivをぶち込むのは間違っているのか

結論

間違ってません

aタグの中にdivなどのブロック要素と呼ばれるものも含むことができます。文法的に誤りではありません。

 

aタグにdivをぶち込める理由

aタグ(要素)についてMDNのリファレンスを見ると、aタグの中にぶち込めるのは次のものと書かれています。

フローコンテンツ (インタラクティブコンテンツ を除く) または フレージングコンテンツ を含む トランスパレントコンテンツ

インライン要素とかブロック要素とかいう文字はどこにも見当たりません。なぜならそんなものはないからです。

なぜか?その謎を解くべく我々取材班はMDNのコンテンツカテゴリページへ飛んだ。

https://mdn.mozillademos.org/files/3704/Content_categories_venn.png

宮野は激怒した。必ずこの意味不明なベン図を除かねばならぬと決意した。宮野はHTML5がわからぬ。

HTML5ではaやdivといった要素がインライン・ブロックの括りではなくこのようなコンテンツカテゴリで分類するようになったわけです。HTMLはあくまでマークアップ、装飾はCSSに任せると。これはfont要素やp要素のalign属性が廃止された理由もこれでしょう。
今でもインラインとかブロックとかいうのはブラウザがデフォルトでこれらの要素のdisplayCSSプロパティを指定しているに過ぎないのだと自分では解釈しています。

そして、a要素の内容にdiv要素が入れられる理由を解説などを読みつつ超ざっくり説明するとこうなるんだと思います。

a要素は、目に見えるのでパルパブル(明瞭な)コンテンツです。
操作の対象になるのでインタラクティブコンテンツです。
テキストを含めることができ、他のフレージングコンテンツと段落を構成できるのでフレージングコンテンツです。
テキストや埋め込みコンテンツに含まれるので、フローコンテンツです。

で、a要素に入れられる内容は、「インタラクティブコンテンツを除くフローコンテンツ」あるいは「フレージングコンテンツを含むトランスパレントコンテンツ」です。トランスパレント(透過的)コンテンツというのは<del>みたいなそのタグを消し去っても(文脈は通らなくなるかもしれないけど)その要素の内容がHTMLとして問題ないものを指すようです。

そしてdiv要素はフローコンテンツのための汎用コンテナと定義され、フローコンテンツに属します。

よって、a要素は(インタラクティブコンテンツを含まない)div要素を含むことができます。

インタラクティブコンテンツを含むことができないのは、例えばドロップダウンリストを開こうとクリックしたらジャンプするのはおかしいということなんだと思います。

補足 : 調べるに至った経緯

フォヨワァさんから「CSS見てくださいオッスオナシャス!」されたので見てみたところこんな感じのコードがあった

<a href="#">
  <div class="hoge">
    なんかこうアレ
  </div&gt;
  <div class="piyo">
    やばそう
  </div>
</a>

やばそう(こなみ)

aタグはインライン要素なのにその中にdivぶち込んでいいのかなって疑問がまずでる。

でも心の中のリトル宮野がいうんですよ、ほんまにそれであっとるんかと。というわけで調べた結果がこの記事です。

感想

HTML5すげー(白目) HTML4とは次元が違う

返信を残す

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