P Tags in Word

One thing that many people don’t realise, is that the distinction between paragraphs and line breaks isn’t unique to HTML. In fact, it’s a distinction that people have been working with quite happily for a very long time – Microsoft Word has supported the two concepts right from it’s very first version. With the more recent versions of Word, the default paragraph spacing is zero, so line breaks and paragraphs look the same, even though there is an important semantic difference. You can still see the difference if you show the non-printing characters:

The first line is a paragraph, note that it ends with the invisible paragraph marker character (¶). The second line ends with a line break character instead (¬) so the end of the line is not the end of the paragraph. There are actually only two paragraphs in this document. You can see this in action when we position the caret at the end of the text and apply a heading style.

The heading style is a paragraph level style, so it applies to the entire paragraph, even though there’s a line break. In fact, if you save that original document as HTML, you get the structure:

<p>Paragraph 1</p>
<p>First line of paragraph 2<br>
Second line of paragraph 2</p>

Just like any good HTML editor would create. You can try this yourself in Word, typing enter will create a new paragraph, typing shift-enter will instead insert a line break. The same keystrokes apply to most HTML editors as well.

Rendering Differences

When copying and pasting content from Word into a HTML editor, it’s possible that there will be extra space added between each paragraph. This is a result of having different settings for what Word calls paragraph spacing (called margin-top and margin-bottom in HTML/CSS).

With the more recent versions of Word (last 10 years worth on Windows, last 5 years or so on Mac) the default is to have no paragraph spacing which effectively makes a paragraph marker and a line break (P and BR) look the same, simply moving to the line immediately below1{#footlink1:1287657038154.footnote}. In any case, in browsers the default is to apply a 12pt paragraph spacing through the CSS margin-top and margin-bottom attributes which are set in the browser’s default stylesheet.

So to get the same rendering as Word, you should keep using paragraphs but add the CSS:

p { margin-top: 0; margin-bottom: 0; }

Make sure you add it both to the rendered page and to the styles used by the editor. There is more detail on this and other ways to make HTML behave more like Word in the Ephox article, Making EditLive! Content Behave More Like Word, which is applicable to all editors.

1 – I've never quite understood why they made this change as it has led to users inserting a new paragraph by pressing enter twice which effectively adds an empty paragraph to get the paragraph spacing they want. ↩