Nesting won’t work while nesting will?

by

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

More Related Contents:

  1. List of HTML5 elements that can be nested inside P element?
  2. How do you overcome the HTML form nesting limitation?
  3. Paragraph of text in circle using CSS [duplicate]
  4. P-end-tag () is not needed in HTML [closed]
  5. Why not use tables for layout in HTML? [closed]
  6. How do I auto-resize an image to fit a ‘div’ container?
  7. How can I position my div at the bottom of its container?
  8. Make CSS Hover state remain after “unhovering”
  9. How to make a HTML Page in A4 paper size page(s)?
  10. Why is ‘position: sticky’ not working with Core UI’s Bootstrap CSS
  11. How to add 1px margin to a flex item that is flex: 0 0 25%?
  12. Keep the middle item centered when side items have different widths
  13. Are you allowed to nest a link inside of a link?
  14. Using custom HTML Tags
  15. HTML-parser on Node.js [closed]
  16. How can I display the checkbox over the images for selection?
  17. HTML / Javascript One Click Print (no dialogs)
  18. Why is the parent div height zero when it has floated children
  19. IFRAMEs and the Safari on the iPad, how can the user scroll the content?
  20. Decode HTML entities in android
  21. What happens if the meta tags are present in the document body?
  22. Can a dynamic class be styled using CSS? [duplicate]
  23. CSS filter:invert not working with background-color
  24. How do I use Access-Control-Allow-Origin? Does it just go in between the html head tags?
  25. Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?
  26. Allow Access-Control-Allow-Origin header using HTML5 fetch API
  27. Setting hidden datalist option values
  28. Tooltips for Button elements
  29. How to make bootstrap carousel image responsive?
  30. How to get horizontal scroll bar in select box in IE?

Leave a Comment