Line breaks in HTML
What is considered "best" practice:
<div class="clr"></div>
(where clr is clear: both) or simply:
<BR CLEAR:BOTH />
I'm really confused since I was once told to never use BR, but then BR is for what the div class is?
Question:
Is it wrong to use <BR />
when you want to clear or use a div?
Thank you 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 that I removed the classes and added the styling directly to the html for readability):
<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 spacing, divs, etc. correctly? Should I use BR instead of Divs for breaks.
Thanks everyone
Final note:
Thank you for pointing out that the interchange has nothing to do with clearing floats. I need to know exactly what a line is ... I guess I don't know.
Thanks freddy for what I really wanted to do and gave me the solution I awkwardly asked for.
source to share
None of the above. The best practice is to use HTML to represent the structure of the information.
So you're using a div to place a section of information on a page. If you need a line break after this information, you are using CSS for styling.
<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 itself has structured information with some standard browser rendering. The framework works well with screen readers that don't bother with HTML elements for visual design.
Let's say you have more elements, in CSS you can allow them to appear next to each other or with a line break or some margins.
source to share
BR are used semantically to add line breaks at places such as in the middle of a phrase or between two words. It does NOT clean the floats.
An element with an explicit property clears the floats on each side of the above element, it's semantically meaningful to use a div here - since you're not creating a line break, but rather clearing the float.
BR can be specified to be clear, but semantically again, it doesn't make sense.
For adding padding / breaks / margins after certain text, it is better to use margin / padding properties rather than using BRs consistently.
So, in short:
This is the first line<br />Second line
For br.
<div style="float: left">Clear me</div>
<div style="clear:left"></div>
For div.
<div style="margin-bottom: 19px;">Test here</div>
For a "line break" or more precisely, a margin below the text.
As far as your presentation goes, it seems like you might want to explore floats a little more. Semantically, this is a bit messy with the fact that everything floated to the left and then you clear all lines. Elegant coding is minimal code - maximal results.
source to share
How about adding transparent properties to span elements instead of inserting another (meaningless) element there?
HTML should describe structure, not presentation. If you add BR-line breaks - to change the presentation (how the site looks in style) you are doing something wrong.
Adding a DIV or SPAN does not affect the structure as they have no meaning at all.
source to share