br (HTML element)

Description

The br element’s purpose is very simple: it creates a line break within a block of text, leaving no padding or margins between the two blocks of text created by the line break. While it’s still perfectly valid to use this element in XHTML Strict pages (it’s not on the list of deprecated elements), you need to take care that you don’t misuse it, because:

• It can be used in a presentational manner. For example, you might use a series of br elements in succession to create a new paragraph effect, instead of simply using a or a blockquote, and applying CSS to set the layout.
• Using br elements becomes a real headache if, later, you want to correct visual inconsistencies and have to sweep through hundreds of files to strip them out.

There are some exceptional cases in which you might be forced to use a br element:

• In poetry, a new line requires just that: a new line. You can’t use a p element in this case. (Evidently poetry wasn’t high on the list of markup requirements when the HTML recommendations were thrashed out!)

• When you’re marking up a postal address, you may need to create single line breaks. However, with the advent of Microformats, there’s quite a well-established method for dealing with postal (and other) address types that avoids the use of the br while offering additional semantic richness. Refer to the section titled http://reference.sitepoint.com/html/hcard/ for more.

This shows the use of br in a poem (well, a poem of sorts):

<p>There was an old man from Swindon,<br/>
    A place that rhymed only with 'pinned on,'<br/>
    Okay, well that's fine,<br/>
    Until the fifth line,<br/>
    At which point … well, I'm totally out of luck.</p>

Here, we use the br to create line breaks in a postal address:

<h3>Postal address:</h3>
<div class="adr">
    23 The Ridings,<br/>
    Anywheresville,<br/>
    Hampshire
</div>

These examples would render on screen as shown in Figure 1.

Figure 1. An example of the br element in use

Note that the examples shown here use the XHTML syntax for the br element, with a trailing slash to signify that the element is closed:

<br/>

If you specify an HTML doctype rather than an XHTML doctype, you would use the following (no trailing slash):

<br>

Use This For …

The br element is a self-closing element and doesn’t contain any content or values.

Compatibility

Every browser listed supports this element type.