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

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.