Structure html sémantique pour un ensemble de lien d'image (avec effet hover), titre et description?

Question

J'ai un ensemble d'éléments (ou une liste d'éléments, mais je ne veux pas impliquer l'utilisation de la liste), ils contiennent un lien d'image, un titre et une description. Le lien de l'image a besoin d'un effet de survol (l'alpha change lorsque vous passez la souris), et il y a une certaine façon dont je veux les disposer: l'image à gauche, puis le titre et la description sur la droite. il y a aussi un arrière-plan pour l'ensemble du bloc d'objets.

est ici une capture d'écran de ce que je veux ressembler: alt text http://img26.imageshack.us/img26/9806/screenshothmr.png

donc ma question est ce qui est une 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 j'ai du mal à faire fonctionner le CSS pour cela. par exemple. J'ai besoin d'un fond supplémentaire pour chaque ensemble de a, dt et dd, et je ne veux pas utiliser 3 images différentes pour combiner l'arrière-plan. maintenant je pense à utiliser un tas de divs pour ce 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'il ne semble pas sémantique pour moi. Je pourrais envelopper dans le li avec une liste non ordonnée, mais cela semble être un balisage supplémentaire.

peut-être que je suis juste trop difficile, mais je veux savoir s'il y a une bonne solution pour cela. C'est une question assez longue, et merci de l'avoir lu jusqu'au bout.

Answer 1

Je dirais que l'utilisation <DL> à cet effet est en fait moins sémantique puis en utilisant <DIV> - vous êtes certainement pas la création d'une liste de définitions. Le lien, l'en-tête et le paragraphe enveloppés dans un div me semblent parfaitement acceptables. Vous pouvez essayer d'utiliser la liste non ordonnée à la place; mais vous aurez probablement le même problème (ou pire que vous n'auriez plus de séparation dt/dd) avec CSS comme vous l'avez fait avec <DL>. De plus, l'utilisation de balises d'en-tête ne sera pas validée dans l'élément de liste, vous devrez donc recourir à un autre paragraphe/div/span - certainement moins qu'idéal.

Mise à jour (basé sur idrumgood « s commentaire ci-dessous):
tête (et d'autres éléments de niveau bloc) ne valide dans les élément de la liste non ordonnée, donc peut-être l'approche suivante serait à la fois être sémantique et travailler avec votre 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 correctement le contenu qu'elles contiennent, et même si vous deviez désactiver vos styles, l'idée générale de la page serait toujours là (une clé pour le 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 un usage parfaitement valide de celui-ci. Si vous utilisiez HTML5, vous utiliseriez "section" pour chaque élément et "figure" pour la capture d'écran.