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

HtmlXhtml

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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)."

Solution 2 - Html

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.

Solution 3 - Html

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.

Solution 4 - Html

After the X HTML, the conventions has been changed, and now it's a mixture of conventions of XML and HTML, so that is why the second approach is wrong and the W3C validator accepts the things correct that are according to the standards and conventions.

Solution 5 - Html

Because the div tag has higher precedence than the p tag. The p tag represents a paragraph tag whereas the div tag represents a document tag.

You can write many paragraphs in a document tag, but you can't write a document in a paragraph. The same as a DOC file.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHenry H MiaoView Question on Stackoverflow
Solution 1 - HtmlColin CampbellView Answer on Stackoverflow
Solution 2 - Htmldefau1tView Answer on Stackoverflow
Solution 3 - HtmlOriolView Answer on Stackoverflow
Solution 4 - Htmlgeekdev786View Answer on Stackoverflow
Solution 5 - HtmlGaurav AgrawalView Answer on Stackoverflow