Correct Use of DIV and SPAN
Thursday, July 31st, 2008
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:
