pタグの中にdivタグは入れられない

pタグの中にdivタグを入れられないのは把握していたのですが、きちんと確認したことがなかったので試してみました。

サンプルコード

pタグ内にdivタグを入れた場合と、aタグやspanタグを入れた場合を試してみます。

<p class="sample01">
  <div>divは入れられない</div>
</p>
<p class="sample01">
  <a href="">a</a>や<span>span</span>はOK
</p>

pタグに背景色を設定して、動作を確認してみます。

.sample01 {
	background: #ccc;z
}

divタグを入れた場合は背景色が表示されませんでしたが、aタグやspanタグを入れた場合は背景色がきちんと表示されました。
pタグのデモページ
デベロッパーツールで確認するとわかりやすいですが、divタグがpタグの外にあると解釈されているみたいです。

これはHTML5から導入された「コンテンツモデル」という考え方で、どの要素にどの要素を入れてよいかを定義したルールが影響しています。
各要素は以下のようなカテゴリに分類されています。

• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content

以下のサイトがわかりやすいです。
HTML5 コンテンツモデル ガイド | HTML5 Content Models Guide

pタグの場合はPhrasing contentの要素のみ入れることができるため、divタグは入れることができません。
　

別の例として、spanタグ内にdivタグを入れた場合と、spanタグを入れた場合でも試してみます。

<span class="sample02">
<div>divは入れられない</div>
</span>
<span class="sample02">
<span>spanなどはOK</span>
</span>

親のspanタグに対して背景色を設定します。

.sample02 {
	background: #ccc;
}

pタグで試した場合と同じく、divタグを入れた場合は背景色が表示されませんでしたが、spanタグを入れた場合は背景色がきちんと表示されました。
spanタグのデモページ
spanタグの場合もpタグと同様に、Phrasing contentの要素のみ入れることができるため、divタグは入れることができません。
　

【参考サイト】

• HTML5 コンテンツモデル ガイド | HTML5 Content Models Guide
• コンテンツ・モデルのおはなし – Speaker Deck
• HTML 5.2: 3. Semantics, structure, and APIs of HTML documents