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 it is easier to read and makes sense.
These tags are fairly easy to use, but they can be misused.
Correct Usage of the P and BR HTML Tags
The paragraph tag (<p>) can be used as a paired tag (with the </p>) or alone. If you are writing HTML 4.0 the end tag is not required, but the end tag, </p> is required for writing XHTML.
The <br /> tag is a singleton tag - it has no end tag. In XHTML, you must close the tag with a final slash - but in HTML 4.0 this is not required (<br>).
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 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 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>
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.
The <br /> tag also stops the alignment of text beside images. If you have an image with an align="right|left|center" all HTML elements (text, images, etc.) will appear beside the image, rather than below it. If you use the clear="all|left|right|center|none" attribute on a <br /> tag, all HTML elements after that tag will display below the image.
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 adjust 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> </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 often 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 XHTML Tag Library.
