skip to content rich footer

stevenclark.com.au

subscibe to the StevenClark.com.au rss feed

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.

One Response to “Correct Use of DIV and SPAN”

  1. WP Dynamic Body ID and Current Page : StevenClark.com.au

    [...] 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 [...]

Social Networking

Keep an eye out for me on Twitter

About the Author

Steven Clark Steven Clark - the stand up guy on this site

My name is Steven Clark (aka nortypig) and my passions are business, web development, photography and writing. My current CV [PDF 619KB] is available for download. I have an MBA (Journalism and Media Studies) and a Bachelor of Computing from the University of Tasmania.

Photography

My photography is at Steven Clark Studio and my regular photo blog presents an ongoing stream of latest images at Walk a Mile in my Shoes and I'm working on a long-term photography project called the King Island Project.

Recently Reviewed Books

Site Supporters

Hosted by Brett Drinkwater at Tashosting who is always there at the other end of my every inconvenient question and technical crisis. Brett's local community support for us over the last five years is greatly appreciated.

skip to top of page

Currently Reading

Ansel Adams: The Camera

As the first of three parts of Ansel Adams Photography Series, Ansel Adams: The Camera begins by discussing the idea of visualisation in relation to photography. Ansel Adams is a master of his craft; this series has sat on my backburner for some time. Book 2 in this series is The Negative and it's followed up by The Print. In them Ansel outlines his philosophy of photography rather than trying to lay down a set of rules. This first instalment is a technical book that explains the good old fashion film camera.