Introduction

The br element is quite possibly the most misunderstood and misused HTML entity. It has been used alongside tables and other elements for presentation and still shows up too often in place of paragraph elements or margin and padding. Recently, there has been a backlash against the br element. Standardistas say to avoid it because of its presentational nature, but it is still alive and well in current and (as of now) future versions of HTML. Why is such an evil element still in the HTML specifications? If you look deeper, the br element does have semantic use and can provide important meaning to a web document.

Starting with Typewriters

A brief history of the origins of the br element will be of aid to understanding its meaning. There are two kinds of breaks (or returns) in the world: hard and soft. A hard return is typically used to start a new paragraph. Soft returns are used to control word-wrapping and line breaks that are not a paragraph (hard) break.

In the early days of typewriters, there was no word wrapping. A bell dinged when the typist was nearing the end of a line and he or she would manually create a line break to go to the next line. If more spacing was needed (for instance in between paragraphs) more line breaks would be inserted.

When word processors and computers came along, word wrapping was controlled automatically and line breaks were relegated to special cases, such as an address, and paragraph breaks.

Fall from Grace

Much like the typewriter, the br element has fallen from grace in recent years. One can now find discarded line breaks in dusty storage rooms like this one. (image by: Telstar Logistics)

In the early days of HTML, standardization was an afterthought for most developers. Table based layouts ruled and the br element was used for just about anything. There was no need to heading tags when it was just as easy to use a span and several line breaks. If a spacer gif did not work out, several line breaks could always be used to add spacing on a page.

Later, web standards became an issue for many developers. Table based layouts began to be discarded. Semantic markup took over. The br element was scorned as only presentational item. Standards like POSH said on the surface to get rid of all br elements (though if you look deeper, you realize that even POSH accepted certain uses of the br element.) The line break had fallen from grace but perhaps too far. As we will see next, there the br element still has semantic meaning and use in modern semantic HTML.

The Semantic Meaning

A line break is not a presentational element, though like most elements, it has been misused as such. In reality, the line break has just as much semantic relevance as a paragraph element, and in a way more than a div element (which is simply a container for content and does not really convey any meaning except that by identifiers used with it.) It does not hold any content inside of it, which may be part of the reason it can be easily aligned in the presentational column, but that does not diminish the semantic significance.

The br element signifies a break in content that is not a new paragraph. In the next section, we will look at proper and improper usage.

Usage

To look at both proper and improper usage of the br element, I will be referring to statements made in the current working draft of the W3C HTML5 specification as it contains the most up to date statement on the intentions of the language by its authors.

Proper Usage

The scope of proper usage of the br element is narrow and well defined. It should be used in special cases were a line break is necessary to convey the proper meaning and increase the readability of a section of text for both humans and robots.

The br element should be used in poetry to distinguish lines in the same stanza. In this case, the line break distinguishes the author’s intent. The stanzas may be broken up into multiple paragraphs with br elements separating the lines in the stanza.


<p>
Shall I compare thee to a summer’s day?<br />
Thou art more lovely and more temperate.<br />
Rough winds do shake the darling buds of May,<br />
And summer’s lease hath all too short a date.
</p>


The line break should also be used to separate lines in an address, in the case where the elements of the address is listed on separate lines. As with poetry, the br element removes ambiguity and helps to distinguish the different lines of the address.


<address>
John Smith<br />
123 Gibraltar Road<br />
Virginia Beach, Virginia 23452
</address>


These two uses are mentioned in the working draft of the HTML5 specification, but there are a other uses for the soft return in markup that are acceptable. The br element may be used inside of the code element to convey line breaks or anywhere else where the use of a line break will increase legibility and decrease ambiguity.

Misuse

Misuse of the br element will earn you a red card. (image by Ernesto JT)

As with any element, there is the opportunity to misuse the line break in semantic markup. A line break should never be used to separate a line of text distinguished as the headline from the body as text. There are handy heading elements for this purpose. Including several line breaks in a row to separate content on a web page is also a misuse of the br element. Use CSS margin or padding.

The W3C states that “br elements must not be used for separating thematic groups in a paragraph.” In these cases, the W3C recommends splitting the paragraph into multiple paragraphs. This seems confusing at first as you are using the paragraph element to separate one paragraph into multiple paragraphs, but it does make sense considering that it is generally accepted that in writing a paragraph should convey one topic and that multiple topics should be split into multiple paragraphs.


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut
ipsum. Aliquam enim purus, hendrerit tempus, varius id, convallis ac, nisi.
Cras venenatis ultricies metus.<br />
Sed consectetur sodales pede. Fusce non lacus. Integer laoreet pellentesque
mauris. Etiam sit amet nulla sit amet ante ornare facilisis.
</p>


Essentially, the br element should be used whenever it provides additional semantic meaning to the document and should be avoided for purely presentational purposes. If you find yourself using the br element too often inside of paragraphs, you probably need to look over your content and markup and split some paragraphs into two or more.

Conclusion

The line break has semantic meaning just like paragraph and heading elements. It should not be avoided as an evil relic of former versions of web standards, but used as a valid semantic element. A developer should not go about placing line breaks throughout his or her markup to adjust the presentation of a web page, but when the element is needed to convey its meaning (that is, a line break) it should be used.