14

I've worked at few places and seen two different methods of doing a section or line break in HTML.

One way I've seen it done is like this:

<div class="placeholder-100pct">&nbsp;</div>

And the other is just using plain old <br />.

Any benefit to one over the other or would it be just a matter of style?

Rob Horton
  • 785
  • 3
  • 9
  • 27
  • Can you provide some context via code example? Line-breaks inside of a paragraph would be (semantically) handled with a BR tag. But if this is for layout purposes you might consider using a clearfix class on the container DIV. – Kevin Boucher Oct 03 '12 at 22:10

6 Answers6

17

Use <br/> when you want a new line in a paragraph, like so:

<p>Hi Josh, <br/> How are you?</p>

This might be useful when writing an address:

<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>

Using a div will automatically give you a new line, but if you want a space between two elements, you can use a margin on the div.

Do not use <br/> to get some space between two divs:

<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>

Hope this helps

Steven
  • 551
  • 3
  • 7
  • 1
    Thanks for this. It kinda became clear to me that
    is for the content and divs, along with CSS styling, is for layout of sections. Guess it was a basic question I was asking myself but it was one of those moments that I wondered, "why am I doing it this way and how do others do it?" Thanks again!     – Rob Horton Oct 04 '12 at 00:41
  • The spacing between the two elements will be determined by the line-height of the parent container, which is not necessarily what you might want. It was never meant to be used as a separator, but as a line break. – Steven Jun 08 '18 at 21:00
10

A div is a generic container. A br is a line break. Neither is particularly well suited for expressing a section break.

HTML 5 introduces sections. You mark up each section, not the break between them.

<section>
  <!-- This is a section -->
</section>
<section>
  <!-- This is another section -->
</section>
Alohci
  • 78,296
  • 16
  • 112
  • 156
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
4

Use a <br /> when it makes semantic sense to do so. If all you need is a line-break, that's what it's there for. If you're trying to split sections of different types of content, then each section should be in a container of its own. For example, if you have an address where each line of the address would show on a separate line, it would make sense to do:

<address>
123 Main Street<br />
Anywhere, USA 12345
</address>
jenjenut233
  • 1,938
  • 16
  • 13
4

One obvious difference is that <br> is inline element, while <div> is not.

So this:

<span>Some text broken into <br /> lines</span>

... is valid HTML code, while this:

<span>Some text broken into <div>&nbsp;</div> lines</span>

... is not, as you cannot place block elements inside inline elements.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
3

<br> has the disadvantage of limiting the size of your gap between sections to the line-height applied to or inheritted by the <span> it sits within.

In other words, with <br>, the size of the break can only ever be exactly the height of one line of text.

Definitely wrap each your "sections" in their own tags, and use margins to control spacing, if you want to retain any control over the spacing. The difference is not just in the semantics of markup.

Faust
  • 15,130
  • 9
  • 54
  • 111
2

If you are looking to provide a break between two sections of content in the sense of a thematic break, then <hr> is the element you should use.

W3C specification

The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.

It's also relatively straightforward to style these as needed as they can take whatever size you require. Note however that it is a void element and cannot contain content (although you can of course add a background-image to it as needed).

Ben Frain
  • 2,510
  • 1
  • 29
  • 44