Skip to: content, navigation

by Ian Lloyd

br (HTML element)

Spec
Depr. Empty Version
No Yes HTML 3.2
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full

Example

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>
Type
inline element
Contains
nothing; this is an empty element
Contained by
block-level elements (except ul, dl, and ol), inline elements

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 p 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>
<address>
    23 The Ridings,<br/>
    Anywheresville,<br/>
    Hampshire
</address>

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

Figure 1. An example of the br element in use Example of 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/>

It’s perfectly valid to use the following markup, assuming that you specify an HTML doctype rather than an XHTML doctype:

<br>

Use This For …

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

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

Every browser listed supports this element type.

In this Section

Related Reading

User-contributed notes

ID:
#2
Date:
Wed, 26 Mar 2008 13:16:34 GMT
Contributed by:
AutisticCuckoo

'It's perfectly valid to use the following, assuming that you specify an HTML doctype rather than an XHTML doctype:'

It's not only perfectly valid, it's the ONLY valid syntax in HTML since <br /> means something rather different in HTML than it does in XHTML.

ID:
#1
Date:
Wed, 26 Mar 2008 13:13:59 GMT
Contributed by:
AutisticCuckoo

The 'Contained by' section is incomplete. TABLE, THEAD, TBODY, TFOOT and TR elements cannot contain a BR element as an immediate child (although it's arguable if those are to be considered block-level elements).

FORM and BLOCKQUOTE elements cannot have BR children in the Strict DTDs.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters