BR element sucks!

You know how it goes. Designer creates the design templates or whatever and then developers have their say. Sometimes, it happens that they mess up something. Among many design issues caused by developers, one in particular really drives me me nuts - incorrect usage of <br/> element. I often find that <br/> element is being used to create layout. And this is simply - incorrect.

Element <br/>, or line break element produces a forced line break (carriage-return) in text. So you use it in text. If you use <br/> element to make a space between other elements, e.g. input fields and buttons, you can mess up the design. If you separate input fields wit line breaks you make the designer's work harder if he/she wants to change the layout. Let's see the following example:

If you do things this way, you might make it impossible to restyle the layout. If, for example, designer wants to move Login button to the right of the password field, this won't be possible using simple CSS. Not to mention if HTML code is being generated on the server - even worse. Instead of this, you can easily get the same visual effect if you apply some CSS styles:

So, if you want to style web form, use CSS, use margins or padding. These things should be set through CSS. Period.

Did you ever notice the same thing? How do you deal with this issue?

More articles in Blog archive or elsewhere
Advertisement

30 Comment(s)

Marco

Marco 07 Nov 2008 #

Totally agree. The only time I use the BR element, is when:

I want a "line-end" in the same paragraph:
<p>First line<br />Second line</p>

Or, I want a "break":
<br class="break" />

Where "break" in CSS is: clear:both .

Pedro

Pedro 07 Nov 2008 #

Agreed with you Janko and with you Marco.

I hate when people use xhtml doctype and they use <br/> to force margins.

In some of my projects I needed to repair those errors made by other developers. This is really pain in a*s.

As Marco said I aslo use <br/> to have line end in paragraph:
<p>First line<br />Second line</p>

Cheers!Laughing

Kris

Kris 07 Nov 2008 #

You guys would really hate the websites I create then...

I haven't taken the leap to CSS design yet, assign from formatting text and whatnot.

dink in detroit

dink in detroit 07 Nov 2008 #

You know the one I hate even more than <br/>?

people who use &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; to indent text.

Grrr!

Janko

Janko 07 Nov 2008 #

Marco, Pedro -  l also agree.

Kris, don't worry Wink

Dink: Oh yeah, it reminds me on unfortunate formatting with even more unfortunate Frontpage Smile

Pedro

Pedro 07 Nov 2008 #

Dink: Ohh God, I forgot about them! I think I hate them moreSmile

Janko: More unfortunate for me was converting page created with Word (or something, don't know exactly to be honest) to HTML. Was really hard...

Forgot to tell you: Very impressive header, Janko.

Janko

Janko 07 Nov 2008 #

Pedro, Yeah, Word generates a bunch of text in Klingon Smile Thanks for the header, it will be alive only for few more days since I redesigned the site completely.

Pedro

Pedro 08 Nov 2008 #

Janko. Redesing? Sounds interestingSmile Really like this header, some time ago created quite similar, but quite in gothic style.

Really like your blog, need to spam here more with comments. Just love itSmile

PS Sorry for my bad English sometimes. It's not my first language.

Drew

Drew 08 Nov 2008 #

A well written article, the br tag can certainly give you mild nightmares. Still nothing scares me more than viewing a site in firebug, only to find hundreds of nested tables! The horror! Yell

Gabe

Gabe 08 Nov 2008 #

Seems a more re-usable method to use in your example would be to style the button with a top margin - you're more likely to repeat that button style than you are to repeat the bottom-margin on the textbox.

Janko

Janko 08 Nov 2008 #

Pedro, thanks, and don't worry about your English Smile

Drew, Ahh, I know. I had to redesign an ugly, billion-nested-tables application Frown

Gabe, exactly.

Andy Ford

Andy Ford 09 Nov 2008 #

I've had to use `br { display: none; }` on more than one occasion. Tends to come up especially with online text editors (FCKEditor, TinyMCE, etc) and republishing of RSS feeds.

Adam

Adam 09 Nov 2008 #

If your designer uses <br/> for layout, fire your designer.   For text, it is fine. Not for layout.

Dainis Graveris

Dainis Graveris 09 Nov 2008 #

huh, agreed, I am always using padding or margin to positionate my elements Smile Nice small tip Smile

Mark Wisecarver

Mark Wisecarver 09 Nov 2008 #

If you do use BR make sure its closed "/" and apply attributes if needed:
www.htmlhelp.com/reference/html40/special/br.html

With ASP.NET MVC <br clear="all" /> may see a comeback.

Dejan

Dejan 09 Nov 2008 #

Basically using any non-design specific element for design sucks. But the br element is not so scary as nested tables can be, especially if they have a ton of extra rows and cells (with a nbsp or single pixel transparent gifs) used to adjust the layout.  That really sucks Smile

Janko

Janko 10 Nov 2008 #

Andy: yeah, online editors can make mess. Windows live writer sometimes make a real mess with paragraphs and br's.

Adam: actually it's my developer(s) who mess up things Smile

Dainis: Wink

Mark: Huh, haven't tried ASP.NET MVC Embarassed

Dejan: I know, I'm dealing with one application with enormous level of nested tables Yell

Chris

Chris 10 Nov 2008 #

Couldn't you just dynamically set the <br /> tag css style to display:none using jQuery?  Haven't tried it yet but it seems like a reasonable option for those wonderful old pages that were written using <br /> tags...

Webdesign Meppel

Webdesign Meppel 11 Nov 2008 #

In fact you're right. Very right! But sometimes it just comes in handy to use <br/> for markup. I must admit I do it sometimes... Wink

Ramesh Soni

Ramesh Soni 12 Nov 2008 #

Good point.. Infact there are lots of such kind tricks which can be used to avoid garbage like <br> and &nbsp;..

philpill

philpill 12 Nov 2008 #

Just to play devil's advocate for a moment .. I'm normally a front end designer, and I'm quite OCD with it so all my CCS and everything immaculate.

However, when I have to put on my developer hat, it's easier to use a placeholder <br /> rather than creating and assigning a class to the element in question. This is troublesome if you're working in a large company where developers and designers work at different parts of the process, and there are methods in place you have to follow.

In reality, it's just a quick hack so the interface is mildly easier to work with, so instead of all form elements sitting jumbled on a page, while waiting on someone to style the page, it's easier to separate them all out with <br /> while testing.

Janko

Janko 14 Nov 2008 #

Chris: sure, but you can do it more easily with css.

philpill: I know it might look easier to use <br />, but let's say you "style" a form with <br /> while testing. What happens if you realize you have to change it across the application? You'll have to change it on tens or hundreds of forms, depending of the size of the application. What happens when you go live?

Romeo

Romeo 14 Nov 2008 #

Back when I wasn't so ignorant I used to use <br>. But heaven must've sent me a strict designer forcing me not to use <br>. Old habits die hard, but they do die. A lesson learned anyway.

Pink

Pink 14 Nov 2008 #

I've been guilty of using <br / >.  Sometimes it is just a quick easy fix.  When you are looking for more exact placement you must go CSS though.

Herschel Rubinstein

Herschel Rubinstein 05 Dec 2008 #

yeah, i agree totally. but don't forget: "text-decoration: underlined;" is for hyperlinks only, otherwise you confuse your visitors Wink if you want to emphasize text, make it strong.

Gerardo Contijoch

Gerardo Contijoch 17 Dec 2008 #

Thank you for the tip!
I always used the <br> tag to separate controls in my pages and never cared too much about it.
I'll have in mind what you said next time!

html to psd

html to psd 06 Mar 2009 #

yes, it will be good also to add for <label> attribute   for=""

P.S. Very good solution for menu.

Thanks

Aleksandar

Aleksandar 12 May 2009 #

Great article. And since I still learn CSS I'm glad I've found this blog. Thanks Marko.

Alejandro

Alejandro 07 Aug 2009 #

That's happen when people:
1. Not pay attention to tutorials and tricks of css.
2. Are very frustrated and have not other way.
3. Use tables and not CSS.

Marty Romero

Marty Romero 15 Jan 2010 #

You know, I have been thinking about this a lot because I found myself doing something over and over again. The very first thing that I do when I start a re-design project is "find/replace" any <br>'s (notice that I wrote <br> and not <br />? offending websites who use <br /> dont even use proper syntax to do their offending) with a space. I much rather let the poorly design break and ix it via css than try to fix it via css and break my head over why the spacing is off.

Comments are closed
via Ad Packs
9292