Has CSS replaced <br/>? [closed]

Question

Nowadays I see many websites having few or no <br/> tags. Has CSS obviated the need for <br/>, or is <br/> still useful?

I am asking this so that I know whether or not to use <br/> in the future.

Answer 1

As D.A. said, sometimes <br> is appropriate and sometimes it isn’t – it depends on what you’re using it for. Here are some examples of what CSS to use instead of <br>, in the cases where <br> is not appropriate.

Vertical margin or padding

If you’re using <br> to add vertical space just because it looks nicer (not because the line breaks are part of the content), you should use vertical margin or padding. Instead of this:

<div class="foo">some content</div>
<br><br>
<div class="bar">more content</div>

You might want this:

<div class="foo">some content</div>
<div class="bar">more content</div>

.foo { margin-bottom: 2em; }

Depending on the situation, you might want to change the distance 2em, or using padding instead of margin, or put the space at the top of .bar instead of the bottom of .foo.

display: block

If you’re using a single <br> to break a line into two solely for visual effect, it might be better to use display: block. If you have this HTML in a form:

<label for="first-name">First name:</label>
<br>
<input type="text" id="first-name" name="first-name" />

then you should do something like this instead:

<label for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name" />

form label { display: block; }

<label>s are display: inline by default, meaning they can sit on a line with other text. When you make an element display: block and don’t set its width to a fixed value like 100px, the element expands to fill the whole line, forcing the element after it to the next line.

Answer 2

<br> is a valid tag. But it's just a line break. You typically don't NEED line breaks as there are typically much more semanticly meaningful tags to use to format your content. But it all depends on context.

It'd be better to ask us if a specific use of the <br> tag makes sense. Post some examples of how you use it.

Answer 3

<br> tags are fine to use, just make sure you use them appropriately. If you find yourself using more than one to get extra spacing then you should be using css instead. A common use of the <br> tag is when inserting something like an address.

<p>Company Name<br>
Address Line 1<br>
Address Line 2<br>
City, State, Zip</p>

Try not to use them for presentation, if you need more than a single line break then use margin or padding in css.

Do not do this

<p>some paragraph text</p>
<br><br><br>
<p>more content</p>

Answer 4

Use <br> whenever the content contains a line break. There are a few cases:

• In a forum, if the poster signs his/her post:

  <p>See you,<br>Jon Doe<br>
  

• For postal addresses, if it would be an overkill to use dedicated <div>s each with its own class for the name, the street, the state etc.

  <p>Jon Doe<br>Sunrise Avenue 123<br>Saint Nowhere</p>
  

• More generally, if users can enter formatted text, and someone enters a single line break.