タイトル通りです！
ネストのルールって難しいです。
ulにネストしていいのはliだけなのに、liの中はなんでもネストしていいとか・・・。
HTML5以前では、ブロック要素やインライン要素を使ってのルールがありました。
が、
HTML5からブロック要素インライン要素といった分類がなくなりました。
そのかわり(？)としてコンテンツモデル
という概念ができました。
コンテンツモデル：各要素が内包できるコンテンツ
HTML要素は、0個以上の以下カテゴリーに属しています。
- フローコンテンツ
- メタデータコンテンツ
- セクショニングコンテンツ
- ヘッディングコンテンツ
- フレージングコンテンツ
- エンベッディッドコンテンツ
- インタラクティブコンテンツ
これにより
今まで「インライン要素」と呼んでいた要素が
フレージングコンテンツとなったようです。
本題に戻ると・・・
a(アンカー)要素の仕様を見ると、
コンテンツモデル…..transparent(透過)
↑親要素のコンテンツモデルがそのまま継承されるという意味
例えば、
<p>
<a href=”#”>リンク</a>
</p>
・a要素の親はp要素である。
・p要素のコンテンツモデルはフレージングコンテンツである。
→a要素にネストできる要素は
<span>,<a>,<img>といった、フレージングコンテンツとなる。
また、
<div>
<a href=”#”>リンク</a>
</div>
・a要素の親はdiv要素である。
・div要素のコンテンツモデルはフローコンテンツである。
→a要素にネストできる要素は
メタデータコンテンツの一部を除いたほぼすべての要素となる。
