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,
- It can be used in a presentational manner. For
example, you might use a series of
brelements in succession to create a new paragraph effect, instead of simply using a
blockquote, and applying CSS to set the layout.
brelements 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
In poetry, a new line requires just that: a new line. You can’t use a
pelement 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
brwhile 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
<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.
brelement in use
Note that the examples shown here use the XHTML syntax
br element, with a trailing slash to signify
that the element is closed:
If you specify an HTML doctype rather than an XHTML doctype, you would use the following (no trailing slash):
This code shows the
br in action:
<p>If I wanted to create a line break right here,<br/>I could use a br element. But I'd feel dirty doing it. There may be no good reason for using one.</p>
Use This For …
br element is a self-closing element and doesn’t
contain any content or values.
Every browser listed supports this element type.