As developers gradually start to get used to using css based layouts instead of tables there is a new pitfill waiting around the corner, the use of semantically incorrect code. There isn’t much you can’t do with div and span, add a <a> element you’re almost at the end of the small list of elements some developers use.

HTML has a lot more to offer than that however, so why use span and div for everything?

A class can be very descriptive to the people working with it. ” class=’title’ ” is easily recognised as being a title. For a browser however is a class no better than a made up string from which no relevance to the element can be conceived. So, a span with a class title, is the same as a span with the class ‘fineprint’. By using correct semantics in HTML you make your code easier to read for yourself. (By using more different elements it’s clearer which one is closed where.)

  <span class='title'>Some title</span>

While this is valid HTML it is not semantically correct, as there is a specific tag for titles. In fact, there are 6. <h1> to <h6> By using these instead of the span method you instead make your site more accessible. Screenreaders do not read the css, so hardsighted people will not know this is a title.

  <h1'>Some title</h1>

Another common mistake

<p>
  Contact me at sonja@multimedia-engineer.nl for questions.
</p>

While that doesn’t seem wrong there’s two mistakes there. By using the paragraph you imply this is just a paragraph of the text, while normally this would be a footer. And as a footer is a block of content it should go in a block element. Besides that the address tag is neglected. Again, this makes it harder for disabled people to find your information as well as writing semantically incorrect code.

<div class='footer'>
  Contact me at
  <address>sonja@multimedia-engineer.nl</address>
  for questions.
</div>

Unjust <br/>

A br element is for adding a single linebreak, not to seperate paragraphs. While it’s only too easy to fall for this mistake it is, again, semantically incorrect. If you write your text in paragraphs you’re markup should represent this by using the <p>.

Stop abusing div and span and use semantically rich code instead

• Start by checking all HTML tags again. If you don’t know a tag excists at all, you surely won’t use it. Alternatively you could also use the HTML cheatsheet from ilovejackdaniels.com.
• Secondly write correct HTML, before adding any CSS to your page. Try and make your HTML as semantically correct as possible already, and adding CSS will only be easier.
• Rethink every use of div and span for a short moment. Consider if this was really the appropriate element to use. In forms for example a label and fieldset should in most instances suffice before resulting to div or span.
• Add CSS to your html

Related posts

This entry was posted on Sunday, January 22nd, 2006 at 2:00 by Sonja Duijvesteijn and is filed under Webdevelopment, Html, CSS, Accessibility. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.