Should the br tag be used?

If you develop a web page nowadays, you don’t use br tags, right? Or do you? And if you do, is it wrong, or the most efficient and pragmatic way to implement a desired line break in some text?

Let’s take a look at this from a number of perspectives:

Different perspectives

The idealist

The idealist would say that the web is a living medium, and to have predefined line breaks is just futile. Just use paragraphs, and your text will wrap where its containing element ends.

The designer

The designer would say that a line break after that exact word with that exact font will look “oh-so-good!” and fit perfectly into their vision for the web site design. They want good copy writers who can choose words that end just in time to suit into their design.

The editor/the copy writer

The people responsible for writing the text want to find the perfect flow in it, and often rely on a delicate balance of words. They want line breaks where they think it will strengthen the impression and readability of the text. They’re also used to WYSIWYG tools where they themselves can decide whether to create a new paragraph or a line break (for instance, by holding down Shift in certain editors).

The web developer

The web developer will say: just make up your minds so I can code this (unless he/she is an idealist :-))!

So, who’s right?

All of them! That’s the thing, isn’t it? A web site is made up by many people and their specific skills, qualities and interests they have to protect, and in the end, it is often about finding the perfect compromise and usage for the context in which the text will be shown. In general, one situation where I’d say that it’s okay to have fixed width and line breaks is in short-lived campaign web sites.

But for more “regular” web sites, I’d argue against the designer that with elastic/fluid web site layouts and the end user having the possibility to change the text size in their web browser, it is impossible to guarantee a fixed font size and where automatic line breaks will occur. And if think you can solve that with a line break, that might end up in the middle of a paragraph, completely ruining the initial idea of the line break.

What code to use?

If it is a demand/decision (perhaps made by the people paying your salary at the end of the day) that it should be a line break at a certain location, how do we code it then? Do we use a br tag, or do we create two separate paragraphs where the one with the line-broken text can have a class removing its top margin, making it look like just a line break (for instance, <p class="additional-text">The text on a new line</p>)? Or should we have pre tags for any text that we want full control over?

Personally, I’d start by ruling out the pre tag. It’s not really intended for this scenario, in my opinion. Whether br tags or p tags with classes are best, I can’t really say. My gut feeling tells me that if a line break is really, really necessary, a line break is probably the way to go, though.

What’s your take? Line breaks or paragraphs? Or perhaps another solution that I haven’t thought of?

53 Comments

  • Chris says:

    I think you are exaggerating. <code>p</code> and <code>br</code> have semantically different meanings.

    For example a poem – each verse can be seen as one paragraph. But the lines must be separated. There is meaning in the separation and also in the <code>br</code>.

    There are more examples.

  • Per says:

    One thing that bothers me are all these headings that break just before the last word and look like this:

    A nice heading that describes the

    article

    That annoys me! The whole heading looks like it going to tip over. In this case I'd definitely use a <code>br</code> to make it look something like this:

    A nice heading

    that describes the article

  • Yes I do use the for Lyrics other than that usually I will steer clear of them except for certain 'special circumstances', for example the <address> element. I know how to use the correctly.

  • Stephen Hill says:

    @Chris and Robert Wellock:

    I have to agree with both of you. the BR tag has a use I should only be used when appropriate.

    However, I don't agree with it being used for styling the page… this should be done via CSS.

    Ste

  • Hartvig says:

    I agree with above. A line break is a line break, where a new paragraph is something else. So br's can be just fine…

  • Tom says:

    I miss the perspective of a CMS programmer. Sometimes you really want your P, but is a BR much easier to implement.

  • Maaike says:

    I agree with Chris, but also with Per. I think sometimes people forget that however important semantics and usability etc are, they are not the only rules in web design. There's also the rules of typography and a heading like Per describes is plain bad typography. If only a line break can fix this, that's fine with me.

  • Teddy Zetterlund says:

    I've had to come up with a similair solution to what Per is taking about (second comment) before when designers thought it was of extreme importance that the text shifted down a line in the midde of the heading.

    I didn't like the idea of using a br for that though so I did it like this.

    <code>

    <h2>Heading with <span>a few words</span></h2>

    </code>

    and then I just put display: block on that span.

  • Maaike says:

    Teddy: actually I think a br tag is more semantically correct. After all, you want the line to break, and that's what the br tag is for…

  • Arjan Eising says:

    <code>br</code> elements must only be used for line breaks that are actually part of the content, as in poems or addresses.

    and

    <code>br</code> elements must not be used for separating thematic groups in a paragraph.

    According to the new Web Applications 1.0.

  • tripleshift says:

    i always tried to think about a website as a book, semantically speaking.

    there is an index, chapters divided into paragraphs and headings, maybe pictures.

    when i make such comparison, i try not to make the error of considering the typographic aspect of books as well as other paper media.

    a website is primarily and mostly a digital media which provides contents through many different ways (direct, search engines, linked reference etc.) and is directed at many different devices.

    the content is important, the look is secondary.

    i think a website can be graphically appealing, not shall be.

    certainly never over semantic.

    the perspectives of designers and copywriters are in my opinion misplaced in making a website.

    sure we can go for eye-candy too, but when we start using <code>br</code> to accomplish a visual objective, we lose the main purpose of a website, which is not to amuse, but to provide content.

    does it make sense in a weblog or a newspaper's website, or a forum or even a webmail site to have a line break at a specific point for something other than a semantic meaning?

    many web-designers fail to understand this simple fact: a website is a lot like a book, but it does not look like one, nor it has to.

    in this light, i agree with chris (first comment) and all those who advocate for the proper distinction of semantic value in paragraphs and line breaks, and therefor their importance.

    they are bot useful and they both serve a specific purpose, which is not that of designer/copywriter's perspective.

    bye

    tripleshift

  • Ed says:

    As an idealist, I would go with the semantic correctness of the job at hand and just please the wage paying designers/editors with CSS if required. If extra non-semantic tags were required for this I'd typically let them go but everyone has a limit as to how much extra crap they're prepared to put their name to.

  • Maaike says:

    Graphic design is about much more than just making things look appealing. A well-designed website is easier to read and understand, so graphic design is an important aid in usability. And so is good typography.

    Having said that, of course design is also about eye candy. And there's nothing wrong with eye candy. In fact, a site that's easy on the eye is easier to use. I'm getting a bit annoyed with all those developers who keep saying that design is nothing more than superficial, useless eye candy. An ugly site is hard to use, however well-built.

    And finally, of course many sites' main purpose is amusement rather than content. And it's usually a combination of both (not to mention branding etc).

    Oh well, all I meant to say is I think it's ok to make sacrifices in semantics if that can solve a typographical problem (and there's no other way to solve it). I'm sorry if I strayed off-topic Robert 😉

  • Ed says:

    Maaike, sacrificing semantics for layout or design shouldn't be the case. All it takes is a bit of creativity. Sacrificing semantics affects every user agent as well as users who are not rendering images/css for whatever reason.

  • Devon says:

    I always code with the <abbr title="eXtensible Style Language Transformations">XSLT</abbr> author in mind, since I use XSLT a lot, so <code></code> elements are often annoying or useless because they create extra work. In very few instances do I feel comfortable using a <code></code>. I find it best to section things off, and I'll only use <code></code>'s within a <code></code>, <code><address></code>, or <code><fieldset></code>. Even then, I try to minimize any use of it.

  • jrf says:

    Eh.. noone has mentioned using a in list tags yet.. I do – if the need arises and it seems a semantically correct solution.

  • eugene says:

    I use it not very often. Maybe to have the last line eak… as in:

    Nulla vulputate nibh et nisi rutrum porttitor. Quisque urna. Maecenas id odio eget tellus egestas scelerisque. In facilisis. Cras massa libero, mollis vel, adipiscing in, viverra non, mi. Vivamus tincidunt tincidunt velit. Nunc venenatis. Duis sodales facilisis ligula. Proin elit nisl, dapibus non, mollis vel, tempus vel, neque. Vivamus hendrerit sem id eros. Donec a dolor quis nunc iaculis molestie. Integer vehicula venenatis nulla. Vivamus nec elit eu sapien aliquet vulputate.

    More lipsum »

  • Maaike says:

    Ed: I know that, of course. But an occasional extra line break is not exactly a disaster for any user agent.

    I think Eugene's example is a good one. Do you have a better idea for this situation? I think a br is more elegant than introducing extra spans, besides you propably can't expect your editors to start using spans when a simple shift/enter will do.

  • Poems and addresses are surely clear examples of when a break element is the semantically correct choice over several paragraph elements.

    And I can see the logic extended to a heading, but that is more of a presentation choice in my opinion.

    May I also raise the presentation and readability issue of orphans. This is particularly prevalent in fluid designs, where quite often you can end up with a single short word on a line of its own that looks awful and ruins readability.

    I've toyed with a little server side intervention that puts a non-breaking space between the last two words of all paragraphs – any thoughts about that? I would agree it should be a browser setting, but in the absence of such…

  • Rob kirton says:

    YES. Use break tags, if only for lines in an address tag.

  • Rowan Lewis says:

    I use the BR element, whenever I need a line break in my content. It has nothing at all to do with design.

    For example in the footer of my website:

    Copyright 2006 PixelCarnage Productions — Generated by Symphony.

    Things may not be as I intended — Download the "Dustismo" font for the best results

    That's how I'd write a footer by hand, as one paragraph.

  • Tommy Olsson says:

    I'll use BR when the line break has semantic meaning, like in lyrics/poetry, postal addresses, code/mathematical equations (that are not in a PRE element), etc.

    Recently I have also began to use BR in forms, instead of wrapping each label/input pair in a DIV.

    I can't think of a case where two (or more) BRs in a row would be acceptable, though.

  • Robert Nyman says:

    Thanks for sharing, everyone; very good input! I really think this is an interesting discussion, and I'm happy that you think that too.

  • Chris says:

    @Tommy

    I can’t think of a case where two (or more) BRs in a row would be acceptable, though.

    I can. If you write a postal address in Germany it's common to separate the street and the city by a blank line. That means two <code>br</code>s, like this:

    Chris

    MyStreet 7

    12345 MyCity

  • Teddy Zetterlund says:

    Maaike asked for a alternative solution to eugene's example so here comes.

    Lorem ipsum… More lipsum »

    This solution is pretty much the same as I suggested in <a>.

    There's no need for extra spans or anything, you even get rid of a element from his example.

  • Tommy Olsson says:

    @Chris:

    In my opinion, that space should be handled by CSS. It is presentational, not semantic. One <code></code> is semantic, because it separates the street address from the postal code and city.

  • bruce says:

    I use the br after a label-input pair in forms, so they look OK with stylesheets off .

  • Pat says:

    Back in the days when I was learning to code HTML, I used Netscape.. remember that? Oh my gosh… well, of course quickly afterwards I dove into the code itself, and never touched a WYSIWYG editor again.

    But.. old habits are hard to break (no pun intended), and I have no qualms about using tags at all. Infact I'll even admit I use two br's because sometimes it looks better than one (duck), and I'm too lazy to code css to interperate a simple br. And of course on the flip side, simple technique is always great when viewing the page without any style.

    However, I don't normally use breaks to break up a running paragraph, whereas I prefer it to wrap naturally.

    I think it's all so trivial, and I don't forsee these tags going away anytime soon.. now if we're talking <blink | marquee>.. who ever thought of those. lol

  • Robert Nyman says:

    Thanks for your comments!

  • Goulven says:

    Maybe I'm over-simplifying, but if we are to remain credible and consistent with what we preach, using BR for line breaks is the most obvious choice. We're doing our best to convince our clients to use semantic markup…

    What we can tell them though is that they should start new paragraphs when moving to another point, not BRs.

  • Robert Nyman says:

    Goulven,

    Thanks for your input!

  • […] to be a purely presentational element. Robert Nyman boils the issue down to a number of different perspectives on line breaks: “no”, “yes”, &#82 […]

  • […] dessa element bör/kan användas. br-taggens vara eller icke vara I Robert Nymana artikel Should […]

  • WA Pages says:

    I'm having trouble with br… My WYSIWYG uses br for each new line… [enter and shift enter]. I usually need 2 lines between paragraphs… but for some reason.. two br tags don't count… I only get one blank row… =/

  • Hjornvar says:

    I squeeze in an invisible image between the br:s to decide the perfect row space. How wrong is that?

  • Robert Nyman says:

    Hjornvar,

    Use CSS for spacing.

  • John says:

    My external css code for my journal section is something like this

    #journal p {

    font: normal normal normal 14px/16px Arial, Helvetica, sans-serif;

    margin: 10px 0px 10px 0px; padding 0px; color: #fff;

    }

    br {

    font: normal normal normal 16px/16px Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;}

    This way when I wrap each paragraph there is a 20px space between total, between the top and bottom of each paragraph.

    And of course, I use for poetry

    Using p and h1 h2 properly, etc tags are important for one reason and one reason alone…. getting your text to be picked up by search engines. If someone is looking for something, all your important content should be in the p and h1 h2 tags. That's what I heard.

    I'm still trying to figure out if img and object tags go inside p tags. So far I do not put them in p.

  • Hjornvar says:

    Robert,

    yes, but in html-mail for example, css won't work for some clients, and the invisible image is just used to eliminate the …

  • John says:

    woops, my post was edited. I said "and of course I use br / for poetry"

  • Robert Nyman says:

    John,

    getting your text to be picked up by search engines.

    It is also vital for making an accessible web site.

    Hjornvar,

    HTML mails are definitely something different, I agree.

  • Mike says:

    Hi-

    Having some issues with &ltbr&gt tag-related things. I'm using &ltbr&gt after text in a Heading 4, and noticing something strange.

    If I use &ltbr&gt before the &lt/h4&gt tag, the break occurs after the heading text in my html editor, which is what I want. However, when I upload the page to the web, I'm seeing an extra space after the heading.

    If I use the &ltbr&gt after the &lt/h4&gt tag, I'm seeing a space in between the heading text and the next line, which I do not want.

    What am I missing?

    Thanks for any help!

    Mike

  • Benjamin McLean says:

    Here is how to do line breaks without BR

    <UL STYLE=”list-style: none; padding: 0; margin: 0;”>
    <LI>Line 1</LI>
    <LI>Line 2</LI>
    <LI>Line 3</LI>
    </UL>

  • I never ever use said tag, at least when working alone. It's nice to be reminded that it perhaps does have a semantic meaning. I only ever seem to see it used presentationally, say to make room for a positioned element in the space it can create… Or to make paragraphs, or other kinds of crimes.

  • Warren says:

    I wrote and maintain a business website. When I say I wrote it, what I mean is I hand coded all the XHTML for every page. The website has 17 pages all done in XHTML 1.0 Strict. The site has over 2500 lines of XHTML or CSS code. I have found that the BR tag has a place in a website. By using the BR tag I can eliminate several usless div's. BR tags can be over used, but they can also be a big help when hand coding a website. Why use a div to do the same work as a br tag?

  • Richard says:

    I personally hate the BR tag – I tend to keep well away from it. BR alters the presentation from within the structure, which should be left for CSS, not HTML

    Anything and everything that the BR does can be achieved using CSS

  • Philip says:

    I disagree with Richard – Sure, you can do everything with divs, spans and CSS, but as HTML is obviously a language suited for text, and tags already exist for things like paragraphs, line breaks, emphasis and headers that are often both structurally and representationally relevant.

    Sure, for a line of text you could just do something like

    line of text

    but however you put it, if it's supposed to be a line break for example in poetry, where you'd generally just want to unambiguously break the line, this is just as implicit as

    Oh, and the line break guy… *slaps with trout*

  • Philip says:

    Damn it. That's supposed to be

    "div class="line" line of text /div

    but however you put it, if it’s supposed to be a line break for example in poetry, where you’d generally just want to unambiguously break the line, this is just as implicit as br /"

  • Philip says:

    Line breaks in poetry really is the perfect example of a case where structur is content!

  • Ivo says:

    Line breaks are used in rare cases when a sentence should be split on several lines and is not widely used anymore due to semantic reasons. If you would like to have text on separate lines you can use the tag. Even if there shouldn’t be an empty line between the text lines you can use CSS to remove the top and bottom margins:

    Option 01:

    p {
    margin-top:0;
    margin-bottom:0
    }

    Option 2 (inline CSS):

    First paragraph
    Second paragraph

  • Ivo says:

    Excuse me, option two should be:

    First paragraph
    Second paragraph

  • Ivo says:

    Sorry, it is not displaying the code as it is. Let me try one more time using tag. Option 2 should be:


    First paragraph
    Second paragraph

  • Ivo says:

    Still the same problem. How to break text on separate pages using css you can look at the 2 options at:

    http://stackoverflow.com/questions/11547934/how-to-style-html-paragraphs-with-css-to-prevent-empty-lines-between-them

  • Ivo says:

    Let me use the instructions at the page bottom:

    &ltp style=”margin: 0;”&gtFirst paragraph&lt/&gt
    &ltp style=”margin: 0;”&gtSecond paragraph&lt/p&gt

Leave a Reply to jrf Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.