Why can't the <p> tag contain a <div> tag inside it?
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)."
In short, it is impossible to place a <div>
element inside a <p>
in the DOM because the opening <div>
tag will automatically close the <p>
element.
According to HTML5, the content model of div
elements is flow content
Most elements that are used in the body of documents and applications are categorized as flow content.
That includes p
elements, which can only be used where flow content is expected.
Therefore, div
elements can contain p
elements.
However, the content model of p
elements is Phrasing content
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
That doesn't include div
elements, which can only be used where flow content is expected.
Therefore, p
elements can't contain div
elements.
Since the end tag of p
elements can be omitted when the p
element is immediately followed by a div
element (among others), the following
<p>
<div>some words</div>
</p>
is parsed as
<p></p>
<div>some words</div>
</p>
and the last </p>
is an error.