1. Technology

Correct Usage of P and BR Tags

Creating Line Breaks and Paragraphs with the P and BR Tags

By

When learning HTML, there are two tags that most people learn first—<p> and <br />—the paragraph and line break tags. These tags put natural breaks in your text so that the text is easier to read and makes sense.

These tags are fairly easy to use, but they can be misused.

Correct Use of the HTML P Tag

The paragraph tag (<p>) can be used as a paired tag (with the </p>) or alone. If you are writing HTML4 or HTML5 the end tag is not required, but the end tag, </p> is required for writing XHTML.

Use the paragraph tag when you want to break up two streams of information into separate thoughts. 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.

And that same paragraph in XHTML:

<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>

The only difference is that the XHTML incldues the closing </p> tag.

The paragraph tag is valid within the following tags:
<address>, <blockquote>, <body>, <button>, <center>, <dd>, <div>, <fieldset>, <form>, <iframe>, <li>, <noframes>, <noscript>, <object>, <td>, <th>

And the following tags are valid within <p>...</p>:
<acronym>, <applet>, <b>, <basefont>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <font>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <s>, <samp>, <script>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <textarea>, <tt>, <u>, <var>

Correct Use of the HTML BR Tag

The <br> tag is a singleton tag—it has no end tag. In XHTML, you must close the tag with a final slash (e.g. <br />), but in HTML it is not required (e.g. <br>).

The <br/> tag is simply a forced line break within the text flow of the web page. Use it when you want the text to continue on the next line, such as with poetry.

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>

The line break tag is valid within the following tags:
<a>, <acronym>, <address>, <applet>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <font>, <form>, <h#>, <i>, <iframe>, <ins>, <kbd>, <label>, <legend>, <li>, <noframes>, <noscript>, <object>, <p>, <pre>, <q>, <s>, <samp>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <td>, <th>, <tt>, <u>, <var>

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

Two Common Misuses of the P and BR Tags

  • Using <br> to change the length of your text lines.
    This will insure that your pages look great on your browser, but not necessarily on another browser. This is because the browsers will automatically put in word wrapping and then when it comes to your <br> will wrap the text again, resulting in short lines and long lines and choppy text. Solution: Use style sheets to define the width of your pages.
  • Using <p>&nbsp;</p> to add more space between elements.
    This is a common practice of some editors, and while it is not technically wrong, it results in awkward looking HTML and can get really confusing to edit later. It also can result in unexpected spacing in different browsers, as they all seem to interpret this differently. Solution: The best solution is to use style sheets to get the amount of spacing you want.

Learn more about these and other tags in the HTML Tag Library.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. HTML Tags
  7. Creating Line Breaks & Paragraphs With the P & BR Tags

©2014 About.com. All rights reserved.