The Correct Usage of the HTML P and BR Elements

Creating Line Breaks and Paragraphs with the P and BR Tags

Text displayed in a book
Understanding how to markup text with paragraphs and line breaks.

When learning HTML, two tags that most people learn very early on are the paragraph and line break elements, which are <p> and <br />. These tags put natural breaks in your text so that your webpage's content is easier to read. While these tags are fairly easy to use, but 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> opening the element and the </p> tag closing it.

In writing HTML4 or HTML5, the end tag is technical not required, but it is generally considered a best practice to close this tag. In XHTML, the closing

 

is required.

 

You would use the paragraph element on a website the same way you would 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>

The paragraph element can be added to an HTML document within the following other elements or tag pairs:

,

,

,,

,,,,

,, <li>, <noframes>, <noscript>, <cke:object>, <td>, <th></p><p>The following tags are valid within the pargraph element. These can appear within he <p>...</p> tag pair:<br/><acronym>, <applet>, <b>, <cke:encoded>%3Cbasefont%3E</cke:encoded> (not for HTML5), <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <font>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <map>, <cke:object>, <q>, <s>, <samp>, <script>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <textarea>, <tt>, <u>, <var></p><p>Note that some of these tags are not supported in HTML5, namely:<br/><applet>, <cke:encoded>%3Cbasefont%3E</cke:encoded>, <big>, <font>, <strike></p><h3>Correct Use of the HTML Line Break Element</h3><p>The line break element, or <code><br></code> tag is a <a data-cke-saved-href="https://www.thoughtco.com/html-singleton-tags-3468620" href="https://www.thoughtco.com/html-singleton-tags-3468620" data-type="internalLink" data-component="link" data-source="inlineLink" data-ordinal="1">singleton tag</a>—it has no end tag.

In XHTML, you must close the tag with a final slash (e.g. <code><br /></code>), but in HTML (including HTML5) it is not required (e.g. <code><br></code>).</p><p>The break element is simply a forced line break within the text flow of the web page. You would use it when you want the text to continue on the next line, but that content is not really sepeate ideas or points (which would make them paragraphs).

An example of this would be with poetry.</p><p>Here is an example of a line break inside a paragraph:</p><blockquote><code><p><br/>Now is the time for all good men to come to the aid of their country.<em><br/></em><br/>The quick brown fox jumped over the lazy sleeping dog.<br/></p> </code></blockquote><p>The line break tag is valid within the following tags (once again, some of these are not vaild in HTML5):<br/><a>, <acronym>, <address>, <applet>, <b>, <bdo>, <big>, <blockquote>, <cke: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>, <cke:object>, <p>, <pre>, <q>, <s>, <samp>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <td>, <th>, <tt>, <u>, <var></p><p>The line break tag is a <a data-inlink="TuitNjCL_gLo0jSvnxjWXg==" data-cke-saved-href="https://www.thoughtco.com/html-singleton-tags-3468620" href="https://www.thoughtco.com/html-singleton-tags-3468620" data-type="internalLink" data-component="link" data-source="inlineLink" data-ordinal="2">singleton tag</a>, which means that no other tags can be used within it.</p><h3>Common Misuses of the P and BR Tags</h3><p>There are some common mistakes that people make with the paragraph and line break elements when marking up a web page</p><ul><li>Using <code><br></code> to change the length of your text line and try to force the text to appear/break in a very specific way.<br/><br/>This will insure that your pages look great on <em>your</em> browser, but not necessarily on another browser and certainly not on all devices if your site is <a data-cke-saved-href="https://www.thoughtco.com/responsive-web-design-3469984" href="https://www.thoughtco.com/responsive-web-design-3469984" data-type="internalLink" data-component="link" data-source="inlineLink" data-ordinal="3">a responsive website</a> that changes its layout<a data-cke-saved-href="https://www.thoughtco.com/multi-device-web-design-3470008" href="https://www.thoughtco.com/multi-device-web-design-3470008" data-type="internalLink" data-component="link" data-source="inlineLink" data-ordinal="4"> based on different screen sizes</a>.

This is because the browsers will automatically put <a data-inlink="luQj8vNjQIoe2FoBSEdUIg==" data-cke-saved-href="https://www.thoughtco.com/text-composition-informatio-1073837" href="https://www.thoughtco.com/text-composition-informatio-1073837" data-type="internalLink" data-component="link" data-source="inlineLink" data-ordinal="5">in word wrapping</a> and then when it comes to your <br> will wrap the text again, resulting in short lines and long lines and choppy text. You should always use CSS <a data-cke-saved-href="https://www.thoughtco.com/css-line-spacing-3469779" href="https://www.thoughtco.com/css-line-spacing-3469779" data-type="internalLink" data-component="link" data-source="inlineLink" data-ordinal="6">style sheets</a> to dictate visual styles instead of trying to force layout by adding specific HTML elements..<br/> </li><li>Using <code><p>&nbsp;</p></code> to add more space between elements.<br/><br/>Once again, this is turning to HTML to create visual layout - in this case spacing, instead fo 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 get really confusing to edit later.

It is also not in line with web standards and the seperatation of structure and style. In some cases, using non-breaking spaces inside of otherwise empty paragraph tags can also can result in unexpected spacing in different browsers, as they all seem to interpret this differently. Once again, the best solution to achieve the spacing elements need in your design is to use style sheets.</li></ul><p>Learn more about these and other tags in the HTML Tag Library.</p><p>Edited by Jeremy Girard</p>

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "The Correct Usage of the HTML P and BR Elements." ThoughtCo, Jun. 19, 2017, thoughtco.com/correct-usage-p-and-br-elements-3468192. Kyrnin, Jennifer. (2017, June 19). The Correct Usage of the HTML P and BR Elements. Retrieved from https://www.thoughtco.com/correct-usage-p-and-br-elements-3468192 Kyrnin, Jennifer. "The Correct Usage of the HTML P and BR Elements." ThoughtCo. https://www.thoughtco.com/correct-usage-p-and-br-elements-3468192 (accessed December 12, 2017).