Semantic html structure for a set of image link (with hover effect), title, and description?

Question

i have a set of items (or a list of items, but i don't want to imply the usage of list), they contain an image link, a title, and a description. The image link needs an hover effect (alpha changes when mouse over), and there's a certain way I want to lay out them: image on the left, then title and description on the right. also there is background for the whole block of items.

here's a screenshot of what i want it to look like: alt text http://img26.imageshack.us/img26/9806/screenshothmr.png

so my question is what is a good semantic html structure for this? i tried to use dl like this:

<dl>
   <dt><a href="#"></a></dt> <!-- using the background of anchor for the hover effect -->
   <dd>Title<p>description goes here</p></dd>

   <dt>...
</dl>

but i'm having a hard time to get the css working for this. e.g. i need an extra background for each set of a, dt and dd, and i don't wanna use 3 different images to combine the background. so now i'm thinking to use a bunch of divs to do this:

<div>
    <a href="#"></a> <!-- image link with background hover -->
    <h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation -->
    <p>description goes here</p>
<div>

the problem with this layout is that it doesn't look semantic to me. i could wrap it around in the li with an unordered list, but that seems like extra markup.

maybe i'm just being too picky, but i do wanna find out if there's a good solution for this. it's quite a long question, and thank you for reading it to the end.

Answer 1

I'd say that using <DL> for this purpose is actually less semantic then using <DIV> - you're most certainly not creating a definition list.

Link, header and paragraph wrapped in a div seem perfectly acceptable to me. You can try using unordered list instead; but you'll likely have same (or worse as you won't have dt / dd separation anymore) problems with CSS as you did with <DL>. Plus using header tags won't validate within list item either, so you'll have to resort to another paragraph / div / span - definitely less than ideal.

Update (based on idrumgood's comment below):
Header (and other block-level elements) do validate within unordered list item, so perhaps the following approach would both be semantic and work with your styles:

<ul>
  <li>
    <a href="#"> </a> <!-- image link with background hover -->
    <h4>Title</h4>
    <p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag -->
  </li>
</ul>

Answer 2

I think your latter example is perfectly good. You're using tags that aptly describe the content they contain, and even if you were to turn off your styles, the general idea of the page would still be there (a key to semantic web).

Answer 3

I agree with idrumgood, this isn't a list of projects, it's a set of projects. Use the divs, it is a perfectly valid usage of it. If you were using HTML5, you would use "section" for each item and "figure" for the screenshot.