We'll be switching to HTML5 next year, as part of our realign, and I'm thinking about the best way to mark up some of the elements that will be surviving. Working from the bottom up, I'm starting with our site's footer, and the featured vehicles, events and jobs.

Each of our featured items - be it a vehicle, an event or a job listing - are marked up in a similar way. Vehicles have a photo, which the other items do not, and events have a date next to them, which the other items do not. With styles applied, they look a bit like this:

The markup we use to get this isn't pretty and, because HTML - prior to HTML5 - didn't allow block level elements to be nested within an anchor tag, we had to mark items up inside them using different methods. For instance, for events, we use the following markup:

For a vehicle, we currently use this markup:

As you can see, neither takes advantage of the new elements that HTML5 has to offer.

But what elements to use?

In the quest to be as semantically correct as possible, it's easy to get bogged down in the choices on offer. Do we carry on using unordered lists, or switch to articles? The latter is arguably a better choice, since each item that we link to is atomic. Each item will either be a vehicle, a job listing or details of an upcoming event.

Currently, each of the featured sections is marked up like this:

Switching that to sections, using articles inside each section currently seems to me like the way we'll go. But marking up the individual items - the vehicles, updates and job listings - seems like the next hurdle. I'm sweating the details right now - but am I going over the top?

What markup would you use?

Had I known that Microsoft was planning on releasing another platform preview of IE9, I'd have waited before publishing yesterday's post on the performance of filters in the major browsers. There doesn't appear to be any support for the filters, but there is a huge jump in the level of support for SVG.

Consider the results seen in IE9 Platform Preview 2:

Now look at the same page, rendered in IE9 Platform Preview 3:

What a difference! In this particular example, I'd say this compares almost identically to Safari's support - I've used the Windows version to take this screenshot so that you don't see the difference between Helvetica and Arial on the OS X version:

Forgiving a couple of artefacts on the pie vectors, this is stellar stuff from Microsoft - and about bloody time too!