Empty paragraph tags - should I allow in HTML editor or not?

Question

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>&nbsp;</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>&nbsp;</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>&nbsp;</p>?

Rondelet

Answer 1

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>&nbsp;</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.”

Adaminah

Thanks very much. I'll assume, then, that CKEditor's default behaviour for blank lines (empty P tag) is "incorrect" (as far as a content editor should behave), so I'll deal with it on that basis. Cheers. – Rondelet

Great answer, very thorough! Correct me if I'm wrong, but OP, I took Jukka to mean that you should use CSS to handle this spacing rather than 'correcting' CKEditor to append a  ? – Whistle

@anotherdave, you’re right. Using CSS here is not just more logical; it’s also more practical and more flexible, since you can set the vertical spacing using CSS units to the value desired, instead of getting some browser-dependent height for a dummy p element and its margins. – Adaminah

The discussion here about margins is somewhat misleading, because margins overlap. So 4 consecutive empty <p> tags have zero height and thus all margins are rendered on top of eachother. Worse yet, a non-empty <p> followed by empty <p>s makes the empty P tags essentially disappear. – Stipule

Answer 2

I would say that IE has this one wrong, empty paragraphs makes no sense to me.

From w3.org:

We discourage authors from using empty P elements. User agents should ignore empty P elements.

I would suggest that when you users create blank lines you wrap their text in paragraphs.

So instead of:

before line break<p>&nbsp;</p>after line break

You should generate

<p>before line break</p><p>after line break</p>

Makes sense?

Cartulary

Thanks, yes I think IE is just trying to be "too helpful" with those empty tags. However, I didn't mean paragraphs weren't wrapped, simply that blank lines didn't include the   element. – Rondelet

Answer 3

When coding using standards compliant HTML & CSS coding the key factor of website text content will be placed in a normal paragraph tag. This is written as <p>. To make SEO friendly paragraph text when writing paragraph text it pays to look at the previous sub heading and then create web page content that explains and expands on this heading text. Yes you have to use the Empty paragraph tags in HTML editor.

Eluviation

I don't think this answer really addresses the problem that the OP is asking about (<p></p> vs <p>&nbsp;</p>) rather than general best practice for SEO or semantic mark-up. – Whistle

Answer 4

I think that for SEO is not good that the navigators render a empty <p>. I replace it with js or php before save it on ddbb :)

Heterotaxis

Search engines could hardly care less about empty p elements. They process and index text. And they really cannot see whether browsers render something or not. – Adaminah

Of course that for Search Engines is important empty <p> tags. The content of the site have to be together and good structured. The <p>&nbsp;</p> element is not good. It can be modified modifying the /include/js/ckeditor_config.js file with this line: config.ignoreEmptyParagraph = false;. Here let you a link. I'm not saying that is the worst thing about SEO, but it's true that it's not a good SEO practice. – Heterotaxis