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.