Empty paragraph tags - should I allow in HTML editor or not?
I'm using CKEditor 4, which seems to have a default setting of using <p></p> to indicate a blank line. Up to now, I've always seen blank lines in HTML represented by <p> </p> - ie. not an empty tag.
So CKEditor's default output representing a blank line is, eg:
<p>paragraph before blank line</p>
<p></p>
<p>paragraph after blank line</p>
The problem is, for a change, IE7,8,9 seems to render this "correctly" as a blank line, whereas Firefox and Chrome do not - they seem to ignore empty <p> and <div> tags, in terms of layout.
So, at the moment, I have to tell CKEditor to include in blank lines (not its default setting for some reason) and, at the back-end, replace any occurrences of empty <p> tags that may slip through.
My question is, what is the gold standard for representing blank lines in HTML? The good-old <p> </p>, or something else?
Also, given that CKEditor's default setting is an empty <p> tag for blank lines, are Chrome and Firefox wrong to ignore them? Or is IE wrong to render them as blank lines, and CKEditor's default should really be to use <p> </p>?
Answer
As per HTML 4.01 on the p element, <p></p> is valid but should not be used, and browsers should ignore it. Browser behavior is inconsistent and generally does not obey the spec. You test this with <hr><hr><p></p><hr> for example – on Chrome, it shows that although the p element has zero height, it has top and bottom margins, so it affects rendering, i.e. is not ignored. – The HTML5 CR seems to be silent about this issue, i.e. it does not say anything specific about a p element with empty content. Update: HTML5 has a general statement about elements with phrasing content as the content mode (such as p): such an element should contain “should have either at least one descendant Text node that is not inter-element whitespace, or at least one descendant element node that is embedded content”. This means that <p></p> should not be used; but this is a recommendation, not a conformance requirement (“should”, not “shall”).
The effect of <p> </p> is undefined by the spec (the rendering of the no-break space character has not been defined), but browsers generally treat no-break space as yet another graphic character, which just happens to be rendered with an empty glyph. So in practice it generates a line box, with a height determined by the computed value of line-height.
By default, there are margins between p elements, corresponding to one empty line. So any need for a blank line between p elements seems to have been caused by overriding the default styling, by something like p { margin: 0 } in CSS. In order to override that, additional CSS rather than an artificial p element should be used. That is, some of p elements should have a suitable nonzero bottom or top margin.
The HTML 4.01 defines “white space characters” as referring to Ascii space, Ascii tab, Ascii form feed, and zero-width space (thus, not to no-break space for example), defines their rendering, and adds: “This specification does not indicate the behavior, rendering or otherwise, of space characters other than those explicitly identified here as white space characters. For this reason, authors should use appropriate elements and styles to achieve visual formatting effects that involve white space, rather than space characters.”