Using the Break Element Properly
As it concerns the break element, there are four basic thoughts people will have: First there are those who say it should never be used on a web page because it is a “presentational element” that has no semantic value; Others say using it carefully is okay, and that it does have some semantic value; Then there are those who say it is used to make paragraph-looking blocks of text on a web page and aren’t really familiar this whole smantik thing; And the last group will be quite familiar with it — “Everyone knows The Break Element is that movie with Bruce Willis… right?”
Dem’s da Breaks
The break element is written in HyperText Markup Language (HTML) as <br>. If it’s Extensible HTML (XHTML), then it’s written as the self-closing <br /> (or as <br></br>). As it pertains to XHTML, I think that when the content is actually sent to the browser with a proper XML media-type (MIME-type) like application/xhtml+xml, the break element would be written with the forward slash to close the element, but without the space before the slash: <br/>. This concerns only a handful of users as most “XHTML” sites, this one included, fall back to sending the content to the browser with the text/html media-type. Maybe someone can confirm this, or set me straight if I’m wrong.
Regarding the break element, I happen to be one of those from the segment that says using it carefully is okay, but one has to give it due consideration and have a justified use for it. I feel the break element does have some semantic value and some justifiable uses. In my eyes it is a pause or break in a single string of content conveyance and should be treated accordingly.
Proper Break Element Usages
As with all elements, there are proper and improper uses. Here a few that are okay in my eyes.
Posting an address
An example of a proper break element usage might be using it within an address. Whether the address is written using the address or paragraph elements is irrelevant as it relates to this article, so I won’t bother with that common confusion right now. I’ll use the paragraph element in this example:
<p>Acme Products<br />123 Runner Road<br />Coyote, Texas 76543</p>
Some people might suggest putting the address in a list, but I cannot think of the address components as list items. That would be an improper usage. It’s a single body. If you want it to be vertically rendered then I feel the break is the way to go. Some will argue that it could be done in the style sheet, and that might be somehow more “pure,” but I think it’s okay to retain an organized look in the absence of styles. It’s forgivable. If you did want the address on a single line none of this would apply, of course, but then again you’d probably insert a comma or something between the address parts anyway. Right?
For forming forms
Forms, in my opinion, invite yet another proper usage of the break element. You know, to force the input element under the label, like this:
<label for="name">Enter your name<br />
<input type="text" name="name" id="name" value="" /></label>
<!--
I know wrapping the label and using the “for” attribute
and “id” is overkill but that’s how I do it (whoops, read update)
-->
It will look like this example label/input pair:
Again, this could be pulled off in the style sheet, but I feel this is a perfectly valid reason to use the break element, one that I prefer instead of applying a block display property to the label, in fact. The form will look a whole lot nicer and more organized if styles aren’t supported. I have also heard a rumor that a break can be beneficial to users of certain assistive technologies. If someone knows of any benefits (or drawbacks), please speak up.
Making two lines
Another valid use, in my opinion, is to break a single line into two. A good example of this can be seen on my footer. The first two lines are one paragraph split with a break. The last line is actually a separate paragraph styled to look as it does.
Poetry or lyrics
Another justifiable use for the break element is to create new lines in a poem or song lyrics. This is necessary and proper. For example:
<p>I think that I shall never see<br />A poem lovely as a tree.</p> <p>A tree whose hungry mouth is prest<br />Against the sweet earth’s flowing breast;</p> <!--The first two versus of the poem “Trees” by Joyce Kilmer (1886–1918)-->
Make sense, doesn’t it? Now let’s explore the other side… the dark side.
Improper Break Element Usages
Let’s flip it over and look at the other side the coin, so to speak. Using breaks poorly:
Faking paragraphs
Some people, in wanting to display blocks of text they’d like to call paragraphs, will use two consecutive break elements to create a visual gap (never pair them up), like so:
This is one pseudograph.
<br />
<br />
And this is another pseudograph.
This is bad. If you do this you should be flogged. If paragraphs are wanted, then obviously paragraphs should be made by putting each of the lines in the example in paragraph elements: <p>This is a real paragraph.</p> and <p>This is another.</p>. By using breaks in this way you have done two things wrong: You’re essentially using breaks for styling and you’ve failed to provide semantic value as these blocks of text aren’t real paragraphs. They’re wannabes.
Creating an unlist
A list, as the name implies, is a list of items. These are related items by way of common parentage, yet they also need to be shown independently. For example, a navigation menu, a shopping list, whatever. All of these are related item lists and in their default state render vertically, like so:
- Bushel of apples
- Crate of oranges
- Bunch of bananas
Some people don’t really understand lists. They don’t really know how to make them or understand the benefits to using them properly. And so, in their ignorance, they improperly use the break element, like this:
Bushel of apples<br />Crate of oranges<br />Bunch of bananas<br />
This is wrong. Don’t do it. It’s not a list, it’s really just one line — one item — broken into three parts. It has no semantic value so it therefore provides no hard separation between the allegedly “listed” items. And if you want, you may style a list to look like you just used some breaks! Okay seriously, if you want to know the right way to make and use lists, here’s a decent article on Using HTML Lists Properly.
Clearing breaks
My first two improper usage examples are very matter-of-fact. If you use breaks in those two ways you are wrong and hopefully this article will set you straight. There is another usage for the break element, one that I will say is mostly improper; one that slips into that proverbial gray area. And that would be using the break element to clear other elements.
As a person who makes web sites I’ve only had to use only a single clearing break, to-date, so I have discovered for myself that the need for clearing breaks can usually be avoided by carefully considering the site’s architecture — effectively knowing the content and how you want it organized — early in the design process. If elements to be cleared and those doing the clearing are contained within a like parent, the clearing process is simple, without the assistance of a break or other misused element. Thus it’s useful to consider the smallest of parent/child relationships first, designing content placement outward from there, clearing what needs to be cleared as you go. Don’t be afraid to break out a div if you have to. Gotta keep the children snug and secure so they won’t jump each other, right?
Time to break away
As I wrote in the beginning, I happen to be one of those from the segment that says using the break element carefully is okay, but one has to give it due consideration and have a justified use for it. I try to be a practical developer, but I strive to do so in a proper way. Hopefully I have given you some ideas in this article so you’re not forced to use a break when you shouldn’t and, perhaps, hopefully I’ve provided insights into when maybe you should.
If you do use a break element in one of the ways I suggest are proper uses, and somebody gives you a hard time about it, you just tell them: “Oh, gimme a break.”
Jermayn Parker responds:
Posted: October 15th, 2007 at 1:35 am →
Did not think of the form method but that is a rather nice way of displaying the fields.
Tommy Olsson responds:
Posted: October 15th, 2007 at 1:48 am →
You’re right that the space before the
NETSCdelimiter is pretend-XHTML only. In real XHTML you’d write<br/>. The extra space is recommended in Appendix C of the XHTML 1.0 specification when serving the document astext/html, since some HTML-only browsers will choke on the normal way of writing self-closing tags in XML.Carlo responds:
Posted: October 15th, 2007 at 4:44 am →
Your post is very interesting but it is a bit long so… I need a break.
:)
Sorry… I couldn’t resist.
Dave Woods responds:
Posted: October 15th, 2007 at 5:07 am →
Hi Mike, The tag seems to be one of those elements that was abused in the past and so everyone now thinks that they can’t use them in the same way that tables are evil and must be avoided at all costs. Obviously this is untrue and is perfectly valid in certain scenario’s which you’ve explained very well
When deciding on whether or not to use the I usually consider the following:
1 - Is there a semantic element that will achieve the same job? Using a heading, paragraph or list may make more semantic sense.
2 - Can I use CSS to change the display of an element to display: block; or clear a float which will force a new line? Would it still make sense with CSS disabled?
3 - If the answer to both of these is “no” then usually this scenario should require the to insert a linebreak.
Tommy Olsson responds:
Posted: October 15th, 2007 at 6:03 am →
@Dave: I use an even simpler lithmus test: “Does the break have a semantic value in this context, or is it purely presentational?”
In the case of forms, it may be a grey area. I wouldn’t use a
brelement between a label and its field, but I do use them between a field and the next label. My reasoning may be a bit muddled, but to me the question of whether the label is to the left* of the field or above it is presentational. On the other hand, separating one label/field pair from the next does, to some degreee, affect the meaning. The alternative would be to enclose each pair in a block-level element, e.g., adiv, but I think thebris sufficiently semantic in this context.*) In a left-to-right writing environment, which is all I have personal experience of.
Rob Mason responds:
Posted: October 15th, 2007 at 7:27 am →
With the address and poetry examples, couldn’t you mark up a special class with say a particular line-height or padding added? This was the HTML would remain “clean” throughout the document.
Otherwise I’m in complete agreement with you. Also I don’t think flogging is harsh enough…some sort of public humiliation is also needed.
Karl responds:
Posted: October 15th, 2007 at 7:49 am →
Personally, I Microformat addresses and use CSS to create a new line by setting each span to display:block. In the real world of Content Management Systems and non-tech editors though, I agree that the example cited is perfectly fine. I don’t write poetry, but if I did I’d mark it up the same way too
Luis responds:
Posted: October 15th, 2007 at 8:11 am →
I have not experience as a programmer, but I find myself stepping on my Wordpress themes and plugins quite often. This post helps me a lot understanding the correct use of the instruction mentioned, I was using it to create extra space between elements. I know I have a lot to read before getting all these coding right, thanks a lot for the post.
Mike Cherim responds:
Posted: October 15th, 2007 at 9:41 am →
@Tommy: Thanks for confirming that. So many rules out there it’s sometimes difficult remembering where I saw what sometimes.
@Rob: An extra element would have to be introduced for each line with
display:blockadded to that element. When all said an done the break would be a simplified approach.@Karl: I did that on a site I recently completed, at least the part about using the spans for vCard/hCard classes. And that would be convenient because to style each line as a block in such a case the extra element would be required anyway. In my case, though, I did add a break after each line to retain address formatting in all instances.
John Lascurettes responds:
Posted: October 15th, 2007 at 12:27 pm →
I’ve used the BR to mark up an address exactly as described when dealing with presenting driving directions to the user. It made the address easier to read on screen. However, for printing out pages, I wanted the map to be as big as possible and the text to take as little room as possible. BR will actually take display:none and the address text-node behaved as one inline element in the print stylesheet.
As far as true XHTML goes. I believe it’s still perfectly legal to have the space in front of the slash, thus why the XHTML transitional recommendation recommends it.
Dennis responds:
Posted: October 16th, 2007 at 4:01 pm →
Mike, great idea for an article/blog post!
John L, driving directions are steps, so I’d use an ordered list.
Tommy Olsson responds:
Posted: October 17th, 2007 at 6:28 am →
@John: Yes, the space before the NETSC delimiter is valid X(HT)ML. It’s just completely unnecessary, unless you are serving the document as HTML.
Andreas responds:
Posted: October 17th, 2007 at 7:21 am →
Great article, and I agree on every point.
Using s to separate labels and their form-fields is the way I always do it. It looks nice without CSS and allows a lot of different styling possibilities as you can display: none on the brs and basically do whatever you want to the label and input. I also put each label/input pair in its own paragraph element, and using position: relative/absolute together with some padding in the paragraph you can easily cerate columns of labels and inputs.
Adam Messinger responds:
Posted: October 23rd, 2007 at 3:04 pm →
Great article; it follows my line of thinking on the subject almost exactly. I wouldn’t call using lists for addresses “improper usage,” though.
I used to be a database wrangler for a small private college’s fundraising department, and we did a lot of mailings. The line order of addresses is important if you want to get things delivered properly, and we occasionally ended up in inter-departmental arguments with people who didn’t follow the address entry guidelines for the shared database.
The situation was even worse for international addresses; getting people to follow the standards set by the Universal Postal Union (which also take line order into account) was definitely a challenge. Most departments didn’t do international mailings, and weren’t aware that standards (or a body that sets them) existed. I like to think that it was good preparation for explaining W3C standards and their importance to my clients.
Based on what I know about domestic and international mailing, I think an ordered list is the second most semantically valid way to represent an address after the address element itself. I’ve never actually used it, but I wouldn’t shy away from it.
Brenton Fletcher responds:
Posted: November 17th, 2007 at 7:42 am →
I have been doing web design / web development for a bit now, (this may be a bit off-topic) and I am currently still using tables for form layouts. I use CSS to syle the table and the form elements of course. I have realised, that in this case I get the many advantages of easy layout and alignment, with very few disadvantages. It’s highly unlikely that any of my users are going to care that I used a table for my form or not - and semantics has to take a back seat to the practical world sometimes. In general, I try to pick the best way of doing something, but if theres a far easier way that’s a bit less semantic, I’ll pick the easier way.
Mike Cherim responds:
Posted: November 17th, 2007 at 10:19 am →
They won’t care unless the practice has made the form or content inaccessible to them. And then again, they might still not care, they’d just move on. And I agree that semantics has to take a back seat to the practical world sometimes, but in this case, I don’t see anything practical about it since tables simply aren’t necessary to style forms. Thus, in light of this fact as I know it, it boils down to not caring for no practical world reason. Sorry to combine those two that way, but that’s almost how I’m reading it.
Best of the Beast in 2007 - Beast-Blog.com responds:
Posted: December 23rd, 2007 at 12:22 am →
[…] October: Using the Break Element Properly […]