26

Apparently, if you have a </p> end tag with no matching start tag within the body element, most if not all browsers will generate an empty paragraph in its place:

<!DOCTYPE html>
<title></title>
<body>
</p>
</body>

Even if any text exists around the end tag, none of it is made part of this p element — it will always be empty and the text nodes will always exist on their own:

<!DOCTYPE html>
<title></title>
<body>
some text</p>more text
</body>

If the above contents of body are wrapped in <p> and </p> tags... I'll leave you to guess what happens:

<!DOCTYPE html>
<title></title>
<body>
<p>some text</p>more text</p>
</body>

Interestingly, if the </p> tag is not preceded by a <body> or </body> tag, all browsers except IE9 and older will not generate an empty paragraph (IE ≤ 9 on the other hand will always create one, while IE10 and later behave the same as all other browsers):

<!DOCTYPE html>
<title></title>
</p>
<!DOCTYPE html>
<title></title>
</p><body>
<!DOCTYPE html>
<title></title>
</p></body>

I can't find any references stipulating that an end tag with no corresponding start tag should generate an empty element, but that shouldn't come across as surprising considering that it's not even valid HTML in the first place. Indeed, I've only found browsers to do this with the p element (and to some extent the br element as well!), but not any explanation as to why.

It is rather consistent across browsers using both traditional HTML parsers and HTML5 parsers, though, applying both in quirks mode and in standards mode. So, it's probably fair to deduce that this is for backward compatibility with early specifications or legacy behavior.

In fact, I did find this comment on an answer to a somewhat related question, which basically confirms it:

The reason why <p> tags are valid unclosed is that originally <p> was defined as a "new paragraph" marker, rather than p being a container element. Equivalent to <br> being a "new line" marker. You can see so defined in this document from 1992:http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html and this one from 1993: http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt Because there were web pages pre-dating the change and browser parsers have always been as backward compatible as possible with existing web content, it's always stayed possible to use <p> that way.

But it doesn't quite explain why parsers treat an explicit </p> end tag (with the slash) as simply... a tag, and generate an empty element in the DOM. Is this part of some parser error handling convention from way back when the syntax wasn't as strictly defined as it was more recently or something? If so, is it documented anywhere at all?

2 Answers 2

20

That it is required is documented in HTML5. See http://w3c.github.io/html/syntax.html#the-in-body-insertion-mode and search down for An end tag whose tag name is "p" and it says:

If the stack of open elements does not have an element in button scope with the same tag name as that of the token, then this is a parse error; act as if a start tag with the tag name "p" had been seen, then reprocess the current token.

Which translated into English means create a p element if the </p> tag can't be matched with an existing <p> tag.

Why it is so, is harder to ascertain. Usually, this is because some browser in the past caused this to happen as a bug, and web pages came to rely on the behaviour, so other browsers had to implement it too.

3
  • 1
    I'd completely forgotten that in-depth normative parser documentation exists in HTML5 (it is normative, right? Doesn't say otherwise). Thanks for the link.
    – BoltClock
    Jul 20, 2012 at 0:30
  • Similar behavior for An end tag whose tag name is "br" is described as follows: "Parse error. Act as if a start tag token with the tag name 'br' had been seen. Ignore the end tag token." In other words, </br> is treated as <br>.
    – BoltClock
    Jul 20, 2012 at 8:57
  • 1
    Indeed. FireFox (3.6 and earlier, I think) used to only do that in quirks mode, but HTML5 specified it for all modes.
    – Alohci
    Jul 20, 2012 at 10:34
1

The HTML4 DTD states that the end tag is optional for the paragraph element, but the start tag is required.

The SGML declaration for HTML4 states that omittag is 'yes', which means that the start tag can be implied.

The end tag follows SGML rules:

an end tag closes, back to the matching start tag, all unclosed intervening start tags with omitted end tags

Anonymous block boxes are generated for inline elements such as text nodes, so they need not be wrapped by the paragraph element.

There's a thread in the Mozilla bug database which explains this behaviour:

Here's a relevant comment by Boris Zbarsky:

Actually, as I understand it, proper parsing of SGML/HTML requires that we behave this way. That is, the '<' of the next tag is a valid way to close out the markup of a previous tag...

And summarized by Ian Hickson:

The basic principle at work here, it appears, is that the markup is fixed up by delaying any closing tags until after all other open elements have been closed, and no attempt is made to make the DOM follow the HTML DTD.

References

5
  • 2
    Although HTML 4 has OMITTAG YES, it is already stated in the DTD that the p element requires a start tag, so it can't be implied for the p element. Also, anonymous block boxes are a feature of CSS, and are generated based on the DOM structure, not the other way around.
    – BoltClock
    Aug 19, 2012 at 3:27
  • Since the start tag is required, but the end tag is optional, the existence of the end tag forces the parser to create a start tag. Aug 20, 2012 at 17:55
  • The anonymous block boxes are generated based on the DOM structure, but text nodes are not allowed to be direct children of the body element. So if the HTML parser sees text nodes without a named parent block element, then the CSS parser adds the anonymous parent block element, apparently the last step in which the closing tag is converted also sees the anonymous block boxes as part of the shadow DOM and foregoes wrapping them within the implied paragraph. Aug 20, 2012 at 18:17
  • 1
    @PaulSweatte - If your argument was correct, then what happens for the p element would also be true for the li element or the td element, which in the same way require a start tag but allow an optional end tag. But see software.hixie.ch/utilities/js/live-dom-viewer/saved/1704 . From this we can see that the same pattern for the three elements produces one li element and one td element, but two p elements. This isn't SGML, it isn't sane, it's just "what browsers do".
    – Alohci
    Aug 20, 2012 at 18:51
  • @Alohci The li and td elements both can have block elements as children, and are only valid inside of the ul and table constructs respectively. Regardless, this is a why question involving undocumented behavior, so 'it's just "what browsers do"' is the probably the best answer. Aug 20, 2012 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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