192

Is it sometimes bad to use <BR/> tags?

I ask because some of the first advice my development team gave me was this: Don't use <BR/> ; instead, use styles. But why? Are there negative outcomes when using <BR/> tags?

4
  • 13
    The best way to find the best answer is go to your dev team and ask them WHY?
    – azamsharp
    Nov 12, 2009 at 23:20
  • Amen to that... Ask the source, not someone who is going to guess. Nov 12, 2009 at 23:25
  • 10
    Usually "first advice" comes when the employee is new. A new employee does not always feel like asking "why?" Obviously, there are times when it's best to ask why, but I think Burak Ozdogan probably understands the "why" after reading these questions. Or at least understands what the HTML community at large things about the subject well enough to discuss it. I'd say he made the right move coming here to ask.
    – Nosredna
    Nov 13, 2009 at 2:15
  • The guidelines should say don't use <br> for layout, or spacing elements apart from one another. This is because different browsers will give a <br> element different height values, sometimes depending on line-height. If you strive for "pixel perfect" layout and design across all browsers, using css via margin: or position: is much more reliable and consistent.
    – ChrisN
    Dec 15, 2022 at 20:20

15 Answers 15

211

The main reason for not using <br> is that it's not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks.

In most cases this means just using different elements, for example <p>Stuff</p><p>Other stuff</p>, and then using CSS to space the blocks out properly.

There are cases where <br> is semantically valid, i.e. cases where the line break is part of the data you're sending. This is really only limited to 2 use cases - poetry and mailing addresses.

3
  • 43
    Personally, I would prefer using <pre/> for poetry. This way, you explicitly specify that the intent is to keep original composition, including possible indentations. Aug 26, 2012 at 19:55
  • 6
    @MichałGórny raises a good point - <br>s seem to only be appropriate where all of the following conditions apply: 1. Newlines are semantically meaningful, 2. Indentation is not semantically meaningful (otherwise you should use a <pre>, 3. There exists no other semantically appropriate tag, like a paragraph or header tag. Mailing addresses satisfy all three of these conditions, and so do song lyrics. Poetry could plausibly violate the 'indentation is not meaningful' condition, and so might be better placed in a <pre>.
    – Mark Amery
    Dec 18, 2013 at 16:48
  • 3
    What about using <br /> in the signoff of an email, such as: <footer>Sincerely,<br />StrexCorp</footer> Opinions?
    – JHS
    Feb 24, 2016 at 23:24
119

I think your development team is refering to <br /> in place of margin spacing. To make empty space between elements, use padding / margin styling via CSS.

Bad use of <br />:

<div>
   Content
</div>
<br />
<br />
<br />
<br />
<div>
     More content...
</div>

Good use of <br />:

<style>
     div {
          margin-top:10px;
     }
</style>

<div>
   Content<br />
   Line break
</div>

<div>
     More content...
</div>
5
  • 4
    You can't just remove your <br>s and add CSS, because if you've removed your <br>s there's nothing to style. It's not incredibly helpful to say "remove your line breaks" without helping (literally) fill in the blanks
    – Gareth
    Nov 12, 2009 at 23:26
  • 7
    You're right, iamkoa, but this doesn't explain why. Hence it does not answer the question. 24 upvotes seems a bit much. Jul 23, 2011 at 12:30
  • @iamkoa You are not explaining why.
    – fabpico
    Feb 1, 2019 at 7:49
  • I think that the second option is better because is more clean and more simple I think is not needed use br
    – simon
    Oct 23, 2019 at 16:47
  • The WHY reasoning for not using <br> elements and instead spacing out page elements with css margin or positioning is because different browsers will treat <br> elements differently as far has HOW TALL they are. Also, the height of a <br> can change with line-height. Developers should strive for consistency, and css styles are consistent across all browsers.
    – ChrisN
    Dec 15, 2022 at 20:17
30

Generally, <br/> is an indication of poor semantic HTML. The most common case is using <br/> to declare paragraph separations, which there are much better ways to do it semantically. See Bed and BReakfast.

There are occasions where it is the proper tag to use, but it is abused often enough that people adopt a "do not use" mentality as to force better semantic thinking.

15

What was meant by your team was probably not to use <br>s to split between paragraphs. For example :

<p>I am a paragraph</p>
<p>I am a second paragraph</p>

is the better way to do that, because you can then easily adjust the spaces between paragraphs through CSS. Other than that, I can not think of anything speaking against line breaks as such.

10

Same concept applies to why we don't use tables for layout - use tables for tables and CSS for layout.

Use <br/> for break lines in a block of text and CSS if you want to affect the layout.

4

Specifying the layout directly makes it difficult adapting the site for different page sizes or fonts for example.

4

If you do this: <BR/> <BR/>

You will get diffrent layout on different browsers.

Deeper:
If you use <BR/> just for line breaks - ok.
If you use <BR/> as a line spacer - not ok.

2

I will generally always set appropriate margins and padding on elements using CSS - it's a lot less messy than loads of <br />s all over the place apart from being more semantically correct.

Probably the only time I would use a <br /> in preference to the margins and padding set by CSS, even if it's not strictly technically correct, is if it was an isolated incident where slightly more space was needed. If I'd got quite a large stylesheet and it didn't seem worth setting up an additional style just for that one occurence, I may use a <br /> as a one-off.

Like most things, <br />s aren't a bad thing providing they're used correctly.

1

I try to write my markup in a way that it's easily readable with CSS disabled. If you're just using BRs to add spacing, it's better to use margins and padding.

1

<br /> should be used for line breaks only, and not to apply style to a page. For example, if you need extra space between paragraphs, give them a class and apply the extra padding to the paragraphs. Don't spread out your paragraphs with <br /><br ><br />

1

They are to be used to represent newlines. Nothing more. Not to fill up space like as at the average geocities site. There is however only one case wherein they may be useful for other purposes than putting a newline: to clear the floats.

<br style="clear: both;">
3
  • 1
    Though used, this method isn't valid XHTML.
    – iamkoa
    Nov 12, 2009 at 23:22
  • 2
    You can often get around this "hack" by using overflow:auto on the containing element instead.
    – mpen
    Nov 12, 2009 at 23:23
  • 2
    @iamkoa: I don't use XHTML. HTML is HTML, not XML.
    – BalusC
    Nov 12, 2009 at 23:25
1

Don't use three or more consecutive <br>s, that's a signal you're using them for stylistic purposes and no, you shouldn't.

Some would say a single <br> is enough and instead of two you should use <p></p>, but there are situations (e.g. screenplays) in which you want to introduce a longer pause without implying a change of topic or a new period starting, like a paragraph usually does.

0

They're fine, if used appropriately. For instance, you shouldn't use them in lieu of <p> tags or to create spacing between elements. You're probably doing something wrong if you ever have two in a row.

0

Here's an example how <br> can negatively affect styling (run snippet for visuals)

(note the misaligned button and odd space on the right):

button {
  width: 70px;
  height: 70px;
}
#arrows {
  border: solid thin red;
  display: inline-block;
}
#arrows span:first-of-type { 
  text-align: center; 
  display: block;
}
#moveUp {
  margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type { 
  display: block;
}
*/
<div id="arrows">
  <span>
    <button id="moveUp" value="üles">&uarr;</button> 
  </span>
  <button id="moveLeft" value="vasakule">&larr;</button> 
  <button id="moveDown" value="alla">&darr;</button> 
  <button id="moveRight" value="paremale">&rarr;</button> 
  <br>    <!-- note the shifted button and odd space on right -->
  <span>or move with keyboard arrows</span>
</div>

-3

In HTML (up to HTML 4): use <br>
In HTML 5: <br> is preferred, but <br/> and <br /> is also acceptable
In XHTML: <br /> is preferred. Can also use <br/> or <br></br>

So use of <br> tag is perfectly valid HTML. But use of <br> is not recommended?

Main reason why not to use <br> is because it's not semantic tag & has no content inside. Its use can be avoided like,

<p>some<br>text<p>

can be marked up without <br> as

 <p>some</p>
 <p>text<p>

If you are using <br> other purpose like top-spacing etc. that can be achieved via CSS margin property.

1
  • 1
    Note that using <p> will add ~16px margin to the top and bottom. Set each of the <p> tag's margin to 0px to avoid spacing the lines using more height than they should. Feb 12, 2015 at 2:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.