The Correct Usage of the HTML P and BR Elements

Use P and BR tags properly for clean HTML and no surprises

HTML Code
Hamza TArkkol / Getty Images

When it comes to learning HTML, two tags that most people learn early on are the paragraph and line break tags, which are <p> and <br /> respectively. These tags put natural breaks in your text so that your web page's content is easier to read. While these tags are fairly easy to use, they can also cause some confusion and be misused.

Correct Use of the HTML Paragraph Element

The paragraph element <p> is used as a tag pair with the <p> tag opening the element and the </p> tag closing it. In writing HTML4 or HTML5, the end tag is technically not required, but it is considered a best practice to close this tag. In XHTML, the closing </p> is required.

You use the paragraph element on a website the same way you do when writing content for off-web needs — when you want to start a new idea or point. Most browsers display paragraphs with one blank line between them. Here is a sample paragraph in HTML:

<p>Now is the time for all good men to come to the aid of their country. The quick brown fox jumped over the lazy sleeping dog.</p>

Many other tags can appear between the opening and closing paragraph tags.

Correct Use of the HTML Line Break Element

The line break element <br> tag is a singleton tag — it has no end tag. In XHTML, you must use the tag with a final slash ( <br />), but in HTML (including HTML5), it is not required.

The break element is a forced line break within the text flow of the web page. You use it when you want the text to continue on the next line, but the content is not a separate idea or point, which would make it another paragraph.. An example of this occurs with poetry where line breaks are usually fixed.

Here is an example of a line break inside a paragraph:

<p>Now is the time for all good men to come to the aid of their country.<br/>
The quick brown fox jumped over the lazy sleeping dog.</p>

Because the line break tag is a singleton tag, no other tags can be used within it.

Common Misuses of the <p> and <br> Tags

People new to coding make some common mistakes with the paragraph and line break elements when marking up a web page.

  • Using <br> to change the length of a text line: Using the break tag in an attempt to force the text to appear or break in a specific way ensures that your pages look great on your browser but not necessarily on another browser and certainly not on all devices. If your site is a responsive website, it changes its layout based on different screen sizes. The browser automatically puts in word wrapping, and then when it comes to the <br> tag, it wraps the text again, resulting in short lines and long lines and choppy text. You should use CSS style sheets to dictate visual styles instead of trying to force layout by adding specific HTML elements.
  • Using <p> &nbsp;</p> to add space between elements: Once again, this is turning to HTML to create a visual layout, in this case spacing, instead of using CSS. This is a common practice of some HTML editors, and while it is not technically wrong, it results in awkward-looking HTML and can be confusing to edit later. It is also not in line with web standards and the separation of structure and style. In some cases, using non-breaking spaces inside otherwise empty paragraph tags can result in unexpected spacing in different browsers, as they all seem to interpret this differently. The best solution to achieve the spacing elements needed in your design is to use style sheets.

    Learn more about these and other tags in this HTML tag list.