Line Breaks in HTML

Question

What is considered "better" practice:

<div class="clr"></div> (Where clr is clear:both) or just simply:

<BR CLEAR:BOTH />

I'm really confused since I was once told never to use BR but then BR is designed to be what the div class is?

Question:

Would it be wrong to just use <BR /> when you want to clear or should I use the div?

Thanks in advance

edit: I've already read http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks and http://www.w3.org/TR/html4/struct/text.html#edef-BR

example (note I've removed classes and added the style directly to the html for ease of reading):

<div style="float:left;">
    <a href="www.example.com"><img style="float:left;" src="/images/videos/video.jpg" width="90" height="75" alt="thumb" title="title" /></a>
    <a href="www.example.com" >Title text</a>
    <div style="clear:right;"></div>
    <span>Length: duration here</span>
    <div style="clear:right;"></div>
    <span>descriptive text here<span>
    <div style="clear:right;"></div>
    <span>Date: date of added here</span>
</div>

In your expert opinions am I using spans, divs, etc correctly? Should I use BR's instead of Divs for the breaks.

Thanks everyone

Closing Note:

Thank you for all for pointing out that a linebreak is nothing to do with clearing of floats. I need to learn exactly what a linebreak is... I guess I don't know.

Thanks to freddy for seeing what I actually wanted to do and giving me the solution I clumsily asked for.

Answer 1

None of the above. Best practice is to use the HTML to give structure to the information.

So, you use div to put a section of information in the page. If you need a line break after that information, you use CSS to style that.

---

<div id="someinformation">
   <p>some parragraph of info</p>
   <ul>
      <li>an item of the list</li>
      <li>another item</li>
      <li>yet another item</li>
   </ul>
</div>

Now in CSS you can style as needed. The document on its own have structured information with some default way of being rendered by the browsers. The structure plays well with screen readers which are not bothered with HTML elements for visual appearance.

Say you have more elements, in CSS you can decide to let them appear beside each other, or with a line break, or with some margins.

Answer 2

You're asking the wrong question for the solutions you gave yourself. Those 'clear' elements aren't there to create line breaks usually, they are there to clear floated elements that occur before them.

Answer 3

I'd never use a div for that. I believe that <br/> is the best thing to do when you need a line break inside a <p> for example. Anyway, I'm not sure why are you using that CLEAR:BOTH or the class=clr.

Answer 4

What about adding clear-properties to your span elements, instead of inserting another (pointless) element in there?

HTML should describe structure, not presentation. If you add BR - line breaks - to change the presentation (how the site looks when styled) you're doing something wrong.

Adding DIVs or SPANs has no effect on the structure, since they have no semantic meaning at all.

Answer 5

BR are used semantically for adding line breaks in such places as in the middle of a phrase or between two words. It does NOT clear floats.

An element with a clear property clears floats on either side specified above the element, here it makes more sense semantically to use a div - since you are not creating a line break but rather clearing a float.

a BR can be specified to have a clear but semantically once again, this would lack sense.

For adding padding/break/margin after a certain text it is best to use the margin/padding properties rather than use BR's consecutively.

So in summary:

This is the first line<br />Second line

For br's.

<div style="float: left">Clear me</div>
<div style="clear:left"></div>

For div's.

<div style="margin-bottom: 19px;">Test here</div>

For a "line-break" or more accurately margin under the text.

As to your presentation, it seems that you may want to research floats a bit more. Semantically it is a bit messy with the fact everything is float left, and then you clear right every line. Graceful coding is all about minimal code - maximum results.