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?

nonopolarity
  • 146,324
  • 131
  • 460
  • 740

2 Answers2

88

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

Community
  • 1
  • 1
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).

Thilo
  • 257,207
  • 101
  • 511
  • 656
Antimony
  • 37,781
  • 10
  • 100
  • 107
  • so `

    ` is like a `

    ` but a special case one?
     – nonopolarity Aug 18 '12 at 04:23
  • No, it (`p`) is **not** a `div`. –  Aug 18 '12 at 04:24
  • Actually, I think `
    ` is intended to be a much more general element for use with CSS. `

    ` is a legacy from the old days when people formatted HTML by hand.

     – Antimony Aug 18 '12 at 04:25
  • 7
    `

    ` is *not legacy* it defines *semantic intent* -- not surprisingly, a paragraph. If `

    ` is defined as *legacy* then we should also get rid of `` elements .. after all, they could be represented with `

    ` ..

     –  Aug 18 '12 at 04:25
  • @pst `

    ` is a block element, like `

    `, and has margin, padding, border... and follow the Standard Compliant box model... so isn't it quite like `
    ` in these aspects?
     – nonopolarity Aug 18 '12 at 04:27
  • @pst so you mean you don't consider CSS at all, but just looking at it purely in a semantic way, that `
    ` is a generic container, while `

    ` very specifically says a paragraph?

     – nonopolarity Aug 18 '12 at 04:29
  • I am saying that the *parsing of the HTML* is not related to CSS. (I misspoke, being a block-element is *exactly* why the `

    ` cannot be nested, as it *cannot* contain block-elements. But this happens *during parsing*; not layout. For instance, a `` with `display:block` would *not* have closed the paragraph element.)

     –  Aug 18 '12 at 04:30
  • @pst but I thought `
    ` is also a block element, and this block element can be nested
     – nonopolarity Aug 18 '12 at 04:32
  • Please see the specification. Again. **It (P) cannot contain block-level elements (including P itself).** –  Aug 18 '12 at 04:32
  • @pst ok, being block element is not the only reason that `

    ` cannot be nested. The reason is that it is a block element, together with the fact that `

    ` cannot contain another block element. These two combined as the reason, not just because it is a block element

     – nonopolarity Aug 18 '12 at 04:43
  • 1
    The one and only reason why `

    ` 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

     –  Aug 18 '12 at 04:44
  • 2
    @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 – nonopolarity Aug 18 '12 at 04:52