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?