Stop Misusing the Break Element

posted by Kravvitz at 10:25 PM on Jan. 22nd, 2009

Categories: HTML, Semantics 6 comments

The break element (<br>) has one purpose and one purpose only, which is to force a line break between lines of text. To use it to add vertical spacing between elements or as a clearing element are clearly misuses of it. Use margins and padding to add vertical spacing between elements. If you really have to add an element as a clearing element, add a <div>. Many times you can make an existing element into a clearing element or take advantage of the float or overflow properties to contain floated elements. You can also use the PIE/Aslett approach for containing floats, which I often use.

Another common misuse of the break element is to place each link in a navigation menu on its own line. That's wrong because an unordered list (<ul>) should be used to mark up the links instead.

So please stop littering your documents with this poor overused element.

#1

Time to fix clearfix?

Arem 4:38 AM on Feb. 24th, 2009

Kravvitz, I'm wondering two things about the PIR clearing method:

Code:

.floatcontainer:after { 
content: "."; 
display: block; 
height: 0; 
font-size:0; 
clear: both; 
visibility:hidden; 
} 



.floatcontainer {
display: inline-block;
} 



/* Hides from IE Mac */ 



* html .floatcontainer {height: 1%;} 
.floatcontainer{display:block;} 



/* End Hack */

1) Is font-size:0; of any use any longer?

2) If we are no longer building sites for IE5 and before, how much of this code can reliably be cut out? (I don't quite understand the hack well enough to know for sure.)

#2 Kravvitz 2:14 PM on Feb. 24th, 2009

1) Yes and no. It's used to fix an issue that happens only sometimes. However, in some rarer situations that declaration can cause an issue too. So just add/remove it as needed.

2) Hmm... the backslash in the first comment in the code is getting stripped from the blog comments. I'll have to look into what's causing that.

Anyway, you can remove the two comments if you want to. They're only needed in IE5/Mac.

#3 Arem 6:21 PM on Feb. 24th, 2009

Thanks Kravvitz. I just noticed that the version of clearfix I have been using does not have font-size:0; so I thought I'd ask about it.

Is it possible to make a simple list of what conditions 1) require the font-size and 2) what conditions don't?

I didn't even notice that the backslash didn't show up. Good luck sorting that out! (Sorry also for writing PIR instead of PIE. A typo!)

#4 Kravvitz 7:20 PM on Feb. 24th, 2009

When you leave it out sometimes a gap appears because of the generated line-box. I haven't found a way to tell ahead of time if this issue will appear. It's just something you have to fix when the problem appears.

#5 Arem 2:40 PM on Feb. 25th, 2009

Thanks again Kravvitz. It's always handy to be aware of these pitfalls before they occur.

#6

THANK YOU

EricReese 1:56 PM on May. 24th, 2009

Finally, this information is coming out on important blogs (I know this post has been here for a long time, just never been registered before)

Login or Register to post a comment