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:

This text is the first paragraph.
<br>
<br>
This text is the second paragraph.

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

<p>This text is the first paragraph.</p>
<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.

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