¿Estructura HTML semántica para un conjunto de enlace de imagen (con efecto de desplazamiento), título y descripción?

Question

Tengo un conjunto de elementos (o una lista de elementos, pero no quiero implicar el uso de la lista), contienen un enlace de imagen, un título y una descripción. El enlace de la imagen necesita un efecto de desplazamiento (alfa cambia cuando se pasa el mouse), y hay una cierta forma en que quiero diseñarlos: imagen a la izquierda, luego título y descripción a la derecha. También hay antecedentes para todo el bloque de elementos.

aquí hay una captura de pantalla de cómo quiero que se vea: texto alternativo http://img26.imageshack.us/img26/9806/screenshothmr.png

así que mi pregunta es ¿cuál es una buena estructura html semántica para esto? Traté de usar dl así:

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

pero estoy teniendo dificultades para que el CSS funcione para esto. p.ej. Necesito un fondo adicional para cada conjunto de a, dt y dd, y no quiero usar 3 imágenes diferentes para combinar el fondo. así que ahora estoy pensando en usar un montón de divs para hacer esto:

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

el problema con este diseño es que no me parece semántico. podría envolverlo en el li con una lista desordenada, pero eso parece un marcado adicional.

tal vez estoy siendo demasiado exigente, pero quiero saber si hay una buena solución para esto. es una pregunta bastante larga, y gracias por leerla hasta el final.

Answer 1

Yo diría que usar <DL> para este propósito es en realidad menos semántico que usar <DIV> - ciertamente no estás creando una lista de definiciones.

El enlace, el encabezado y el párrafo envueltos en un div me parecen perfectamente aceptables. Puede intentar usar una lista desordenada en su lugar; pero es probable que tenga los mismos problemas (o peores ya que ya no tendrá una separación dt / dd) con CSS como lo hizo con <=>. Además, usar etiquetas de encabezado tampoco se validará dentro del elemento de la lista, por lo que tendrá que recurrir a otro párrafo / div / span, definitivamente menos que ideal.

Actualización (basado en el comentario de idrumgood a continuación):
El encabezado (y otros elementos de nivel de bloque) se validan dentro de un elemento de la lista desordenada, por lo que quizás el siguiente enfoque sea semántico y funcione con sus 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

Creo que tu último ejemplo es perfectamente bueno. Está utilizando etiquetas que describen adecuadamente el contenido que contienen, e incluso si desactivara sus estilos, la idea general de la página aún estaría allí (una clave para la web semántica).

Answer 3

Estoy de acuerdo con idrumgood, esta no es una lista de proyectos, es un conjunto de proyectos. Use los divs, es un uso perfectamente válido de él. Si usara HTML5, usaría & Quot; sección & Quot; para cada elemento y " figura " para la captura de pantalla.