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.

Translations

This article has been translated into the following languages:

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

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.