Using br or div for section break

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>

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.


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>

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

Tags:

Html

Css

Layout