サイト制作に関するメモ書き

HOME > HTML・CSS > pタグの中にdivタグは入れられない

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タグは入れることができません。
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP