Struttura html semantica per un set di link immagine (con effetto hover), titolo e descrizione?

Question

Ho una serie di elementi (o un elenco di elementi, ma non voglio implicare l'utilizzo dell'elenco), contengono un collegamento immagine, un titolo e una descrizione. Il collegamento all'immagine ha bisogno di un effetto al passaggio del mouse (l'alfa cambia quando passa il mouse sopra) e c'è un certo modo in cui voglio disporli: immagine a sinistra, quindi titolo e descrizione a destra. inoltre c'è lo sfondo per l'intero blocco di elementi.

ecco uno screenshot di come voglio che appaia: alt text http://img26.imageshack.us/img26/9806/screenshothmr.png

quindi la mia domanda è: qual è una buona struttura html semantica per questo? ho provato ad usare dl in questo modo:

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

ma sto facendo fatica a far funzionare il CSS per questo. per esempio. ho bisogno di uno sfondo extra per ogni set di a, dt e dd e non voglio usare 3 immagini diverse per combinare lo sfondo. quindi ora sto pensando di usare un sacco di div per fare questo:

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

il problema con questo layout è che non mi sembra semantico. potrei racchiuderlo nella lista con un elenco non ordinato, ma questo sembra un markup extra.

forse sono solo troppo esigente, ma voglio scoprire se c'è una buona soluzione per questo. è una domanda piuttosto lunga, e grazie per averlo letto fino alla fine.

Answer 1

Direi che usare <DL> a questo scopo è in realtà meno semantico rispetto a <DIV> - sicuramente non stai creando un elenco di definizioni.

Link, intestazione e paragrafo racchiusi in un div sembrano perfettamente accettabili per me. Puoi invece provare a utilizzare un elenco non ordinato; ma probabilmente avrai gli stessi (o peggio che non avrai più separazione dt / dd) con CSS come hai fatto con <=>. Inoltre, l'uso dei tag di intestazione non verrà convalidato neanche all'interno dell'elenco, quindi dovrai ricorrere a un altro paragrafo / div / span - sicuramente meno dell'ideale.

Aggiorna (basato sul commento di idrumgood di seguito):
L'intestazione (e altri elementi a livello di blocco) vengono convalidati all'interno di una voce di elenco non ordinata, quindi forse il seguente approccio sarebbe sia semantico che funzionerebbe con i tuoi stili:

<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

Penso che il tuo ultimo esempio sia perfettamente buono. Stai usando tag che descrivono in modo appropriato il contenuto che contengono e anche se dovessi disattivare i tuoi stili, l'idea generale della pagina sarebbe ancora lì (una chiave per il web semantico).

Answer 3

Sono d'accordo con idrumgood, questa non è una lista di progetti, è un insieme di progetti. Usa i div, ne è un uso perfettamente valido. Se si utilizza HTML5, si utilizzerà & Quot; sezione & Quot; per ogni elemento e " figura " per lo screenshot.