div タグに p タグは入れられるけど、p タグに div タグは入れられない

起こる現象

HTML の p タグの中に div タグを記述すると、div タグが p タグを閉じた次に置かれた状態になってしまい、p タグの中に div タグを入れることができない。
div タグの中に p タグを記述した場合は、素直に入ってくれる。
p タグの中に span タグを記述した場合も、素直に入ってくれる。

ソースコード

<p><div>div in p</div></p>
<div><p>p in div</p></div>

開発者ツールでの表示

<p></p>
<div>div in p</div>
<p></p>
<div>
  <p>p in div</p>
</div>
<p>
  <span>span in p</span>
</p>

なぜこうなるか

HTML Living Standard では、それぞれのタグに入れることができる要素の種類がコンテンツモデルとして決まっている。

今回使用したタグおよびテキストでは、以下のようになっている。

タグ/テキスト	属する種類	入れることができる種類
p タグ	フローコンテンツ パルパブルコンテンツ	フレージングコンテンツ
div タグ	フローコンテンツ パルパブルコンテンツ	フローコンテンツ (dl タグの子でないとき)
span タグ	フローコンテンツ フレージングコンテンツ パルパブルコンテンツ	フレージングコンテンツ
テキスト	フローコンテンツ フレージングコンテンツ パルパブルコンテンツ	-

これから、以下のことがわかる。

• p タグはフローコンテンツなので、div タグに入れることができる
• span タグはフレージングコンテンツなので、p タグに入れることができる
• div タグはフレージングコンテンツではないので、p タグに入れることができない

また、p タグの直後に div タグ (など) がある場合は、p タグの終了タグを省略できることになっている。

そのため、p タグの中に div タグを入れようとしても、入れることはできず、p タグの終了タグを省略して直後に (p タグの兄弟として) div タグを置いた、として扱われる。

p タグにブロックを入れたい場合は

何を実現したいかにもよるが、テキストのブロックを入れたい場合は span タグに CSS の display: block; や display: inline-block; をつけるとよい。

参考

• 【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ｜webliker（ウェブライカー）
• HTML5でのタグの入れ子のルール | 社員ブログ | くらしを楽しむ世の中を、もっと。