Use the p element to create paragraphs

When creating paragraphs of text in HTML, some WYSIWYG editors and people use double br (line break) elements to separate the paragraphs visually:

  1. This text is the first paragraph.
  2. <br>
  3. <br>
  4. This text is the second paragraph.

While this method often provides the desired visual result there is a better way – the p (paragraph) element:

  1. <p>This text is the first paragraph.</p>
  2. <p>This text is the second paragraph.</p>

The benefits of using the p element are:

  • It makes it easier to control paragraph margins consistently with CSS
  • It enables users of screen readers and other assistive technology to “skim” documents by skipping to the next paragraph
  • It semantically describes the text as what it is – a paragraph

There are occasions when a single br element is appropriate, but if you find yourself using multiple consecutive br elements to separate chunks of text it is very likely that you should be using p elements instead.

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.


This article has been translated into the following languages:

Posted on March 16, 2009 in Quick Tips, Accessibility, (X)HTML