Structure sémantique html pour un ensemble de liens d’image (avec effet de survol), titre et description?

Question

J'ai un ensemble d’éléments (ou une liste d’éléments, mais je ne veux pas sous-entendre l’utilisation de liste), ils contiennent un lien vers une image, un titre et une description. Le lien de l'image nécessite un effet de survol (l'alpha change lorsque vous passez la souris sur votre souris), et je souhaite les présenter d'une certaine manière: image à gauche, puis titre et description à droite. il y a aussi un fond pour tout le bloc d'éléments.

voici une capture d'écran de ce à quoi je veux ressembler: texte de remplacement http://img26.imageshack.us/img26/9806/screenshothmr.png

ma question est donc de savoir quelle est la bonne structure html sémantique pour cela? J'ai essayé d'utiliser dl comme ceci:

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

mais je vais avoir du mal à obtenir le css travailler pour cela. par exemple. J'ai besoin d'un fond supplémentaire pour chaque ensemble d'un, dt et dd, et je ne veux pas utiliser 3 images différentes pour combiner le fond. Alors maintenant, je pense à utiliser un groupe de divs pour le faire:

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

le problème avec cette mise en page est qu’elle ne me semble pas sémantique. Je pourrais l'envelopper dans le li avec une liste non ordonnée, mais cela semble être un balisage supplémentaire.

Peut-être suis-je trop pointilleux, mais je veux savoir s’il existe une bonne solution à cet égard. C'est une question assez longue, et merci de l'avoir lue jusqu'à la fin.

Answer 1

Je dirais que l'utilisation de <DL> à cette fin est en réalité moins sémantique que d'utiliser <DIV> - vous ne créez certainement pas une liste de définitions.

Les liens, en-têtes et paragraphes insérés dans une div me semblent parfaitement acceptables. Vous pouvez plutôt utiliser la liste non ordonnée. mais vous aurez probablement les mêmes problèmes (ou pire que vous n’auriez plus de séparation dt / dd) avec CSS comme avec <=>. De plus, l'utilisation de balises d'en-tête ne validera pas non plus l'élément de liste. Vous devrez donc recourir à un autre paragraphe / div / span, ce qui est loin d'être idéal.

Mettre à jour (d'après le commentaire de idrumgood ci-dessous):
L'en-tête (et d'autres éléments de niveau bloc) sont validés dans les éléments de liste non ordonnés. L'approche suivante pourrait donc être à la fois sémantique et fonctionner avec vos 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

Je pense que votre dernier exemple est parfaitement bon. Vous utilisez des balises qui décrivent bien le contenu qu'elles contiennent et même si vous désactiviez vos styles, l'idée générale de la page serait toujours là (une clé du Web sémantique).

Answer 3

Je suis d'accord avec idrumgood, ce n'est pas une liste de projets, c'est un ensemble de projets. Utilisez les divs, c’est une utilisation parfaitement valide. Si vous utilisiez HTML5, vous utiliseriez & Quot; section & Quot; pour chaque élément et " figure " pour la capture d'écran.