Why can't the <p> tag contain a <div> tag inside it?

Henry H Miao picture Henry H Miao · Dec 6, 2011 · Viewed 77.3k times · Source

As far as I know, this is right:

<div>
  <p>some words</p>
</div>

But this is wrong:

<p>
  <div>some words</div>
</p>

The first one can pass the W3C validator (XHTML 1.0), but the second can't. I know that nobody will write code like the second one. I just want know why.

And what about other tags' containment relationship?

Answer

Colin Campbell picture Colin Campbell · Jan 1, 2012

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."