estrutura html semântica para um conjunto de ligação para imagem (com efeito hover), título e descrição?

Question

Eu tenho um conjunto de itens (ou uma lista de itens, mas eu não quero implicar o uso de lista), eles contêm um link de imagem, um título e uma descrição. O link de imagem precisa de um efeito hover (alfa muda quando o mouse over), e há uma certa maneira que eu quero colocar para fora deles: imagem à esquerda, em seguida, título e descrição do lado direito. Também existe fundo para todo o bloco de itens.

Aqui está uma imagem do que eu quero que ele se parece: texto alt http://img26.imageshack.us/img26/9806/screenshothmr.png

Então, minha pergunta é o que é uma boa estrutura html semântica para isso? i tentou usar dl assim:

<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>

mas eu estou tendo um momento difícil para obter o trabalho css para isso. por exemplo. Eu preciso de um fundo extra para cada conjunto de, um dt e dd, e eu não quero usar 3 imagens diferentes para combinar o fundo. Então agora eu estou pensando em usar um monte de divs para fazer isso:

<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>

O problema com este esquema é que ele não parece semântica para mim. eu poderia envolvê-la em torno da li com uma lista não ordenada, mas que parece ser de marcação extra.

Talvez eu só estou sendo muito exigente, mas eu quero saber se há uma boa solução para isso. é uma longa questão bastante, e obrigado por lê-lo até o fim.

Answer 1

Eu diria que o uso <DL> para este fim é realmente menor semântica em seguida, usando <DIV> - você certamente não criar uma lista de definições.

Ligação, cabeçalho e parágrafo envolto em um div parecer perfeitamente aceitável para mim. Você pode tentar usar lista não ordenada, em vez; mas provavelmente você vai ter mesmo (ou pior que você não terá que dt / dd separação anymore) problemas com CSS como você fez com <DL>. Plus usando tags de cabeçalho não irá validar dentro item da lista ou, então você vai ter que recorrer a outro parágrafo / div / span -. Definitivamente menos do que o ideal

Atualizar (com base no idrumgood 's comentário abaixo):
Header (e outros elementos nível de bloco) fazem validar dentro item da lista não ordenada, por isso, talvez a seguinte abordagem ambos seriam semântica e de trabalho com os seus estilos:

<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

Eu acho que seu último exemplo é perfeitamente bom. Você está usando tags que descrevem adequadamente o conteúdo que eles contêm, e mesmo se você fosse para desligar os seus estilos, a idéia geral da página ainda estaria lá (a chave para a web semântica).

Answer 3

Eu concordo com idrumgood, esta não é uma lista de projectos, é um conjunto de projectos. Use as divs, é um uso perfeitamente válido dele. Se você estivesse usando HTML5, você "seção" de cada item e "figura" para a captura de tela usar.