Correct Use of DIV and SPAN
There are two generic (and semantically empty) containers you can readily pull into your markup to achieve layout and presentation effects. These are the <div> and <span> elements. It’s well worth your while to understand their purpose because they are definately not entirely interchangeable, as some developers seem to imagine. Thus, two separate elements in the specification.
A <div> is a block level container. We often use them to create sections within our layout and create structure around the content. Its purpose is to contain block level elements like paragraphs, headings and lists. The trick is in not over-utilising the <div> when it’s not needed. If you have an unordered list that becomes your horizontal navigation bar, for example, you don’t need to put it into a <div> – it’s already a block level element, and a block level container of list items. Think of them as empty meaningless containers for areas of your markup that you’d like to group together. Perhaps you want one with an id of #content, one with an id of #sidebar and of course a third with an id of #footer.
On the other hand <span> is an inline generic container. Equally as semantically empty. This means within a block level element like a paragraph you might want to treat an inline section of the text as a special container. For example:
<p>There is something <span>very odd indeed</span> about wrongly used spans.</p>
There isn’t anything difficult about these two elements but for some reason they get maligned to a great degree. Ultimately, if you create markup with superfluous divs everywhere you’ve probably negated the benefits of dropping tables for layout. Similarly, if you’re using the <span> as a block level container or littering your pages with them then something should be flagging you as wrong.
Both elements have their place in marking up websites. Both, however, should be used sparingly and only when absolutely necessary. The trick is in getting comfortable with when and where.
September 4th, 2008 at 12:53 pm
[...] links. Note that the ID is placed directly on the unordered list and not on a containing div. You don’t need to put a block level element into a div container, so just style the unordered list [...]