55

I usually won't nest <p> like this:

<p>The following:
    <p>one</p>
    <p>two</p>
</p>

and I will nest like that using <div> instead. But today I used <p> but it seems that both Emacs and Google Chrome both would consider the outer <p> closed as soon as it see a new <p> is started. (the DOCTYPE is HTML 4.01 Strict).

I thought <p> is no more than a <div> but just with some pre-defined margin and padding, but is it true that <p> cannot be nested? If so, what rule says that it cannot?

0

2 Answers 2

89

Because a paragraph is a paragraph .. and that's how HTML is defined (and HTML is not XML).

Any <p> (or other block-level element) will implicitly close any open <p>.

Per 9.3.1 Paragraphs: the P element of the HTML 4.01 specification:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).


Note that this is how the HTML is parsed and that even a <div> would have implicitly closed the paragraph!

However, a <span> with display:block; would not have closed the <p> as a <span> is not a block-level element.

That is, the CSS is irrelevant at this stage of the HTML processing and the CSS is irrelevant to the DOM/parser when determining if an element is a block-level element or not. Consider the case when CSS is applied dynamically or through a not-yet-loaded-stylesheet: the applied CSS does not alter the DOM.


While the HTML5 (working-draft) specification does not include the language above in the HTML4 specification, it does go on to define a paragraph as a container for phasing content and further has a section on paragraphs.

The accepted answer to List of HTML5 elements that can be nested inside P element? says that <p> elements cannot nest in HTML5. The key phrase from the documentation is: "Runs of phrasing content [which does not include <p> elements] form paragraphs". Furthermore, HTML5, trying to be backwards-compatible in many aspects, has a rationale on "Restrictions on content models and on attribute values":

Certain elements are parsed in somewhat eccentric ways (typically for historical reasons), and their content model restrictions are intended to avoid exposing the author to these issues.

This behavior is referenced from a HTML5 WG wiki entry on flow content:

HTML5's restrictions on nesting of p elements and on what p elements may contain, are due to, quote: “peculiarities of the parser” that causes p to be auto-closed ..

14

From the HTML 4.01 specification section 9.3.1

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

12
  • so <p> is like a <div> but a special case one? Commented Aug 18, 2012 at 4:23
  • No, it (p) is not a div.
    – user166390
    Commented Aug 18, 2012 at 4:24
  • 7
    <p> is not legacy it defines semantic intent -- not surprisingly, a paragraph. If <p> is defined as legacy then we should also get rid of <hX> elements .. after all, they could be represented with <div> ..
    – user166390
    Commented Aug 18, 2012 at 4:25
  • 1
    The one and only reason why <p> cannot be nested is because that is how it is defined. Nothing more, nothing less. If that little clause was not in the specification, the it could be nested .. but then that would not be the HTML 4.01 specification
    – user166390
    Commented Aug 18, 2012 at 4:44
  • 3
    @pst actually, I do feel that, why can't a paragraph contain any block element? In common usage, we may have a paragraph, and this paragraph can quote a short line and then continue on, so this quote is more logically part of this paragraph as a unit, rather than a separate entity outside of this paragraph. But of course if that's the way it is, then people have to design according to this rule Commented Aug 18, 2012 at 4:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.