Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using br or div for section break

Tags:

html

css

layout

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?

like image 372
Rob Horton Avatar asked Oct 03 '12 22:10

Rob Horton


People also ask

Should I use div or br?

<div></div> is a container of html elements <br> is line break which which starts with new line, it is used at the time of using inline level elements such as input, span, a etc.

Is using br a good practice?

It is a bad practice to use <br> to separate paragraphs of text. Instead, we should use the <p> tag.

Can I use div instead of section?

Both the tags (<div> and <section>) are used in the webpage, <section> tag means that the content inside relates to a single theme, and <div> tag is used as a block part of the webpage and don't convey any particular meaning.

Why we should not use br tag?

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.


1 Answers

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

like image 156
Steven Avatar answered Oct 05 '22 00:10

Steven