Semantische HTML-Struktur für eine Reihe von Bild-Links (mit Hover-Effekt), Titel und Beschreibung?

Question

Ich habe eine Reihe von Elementen (oder eine Liste von Elementen, aber ich möchte nicht die Verwendung von Liste implizieren), sie enthalten einen Bildlink, einen Titel und eine Beschreibung. Der Bild-Link benötigt einen Hover-Effekt (Alpha ändert sich, wenn man mit der Maus darüber fährt), und auf eine bestimmte Weise möchte ich sie auslegen: Bild links, dann Titel und Beschreibung rechts. es gibt auch Hintergrund für den ganzen Block von Gegenständen.

hier ist ein Screenshot von dem, was ich es aussehen soll: alt text http://img26.imageshack.us/img26/9806/screenshothmr.png

so meine Frage ist, was eine gute semantische HTML-Struktur dafür ist? Ich habe versucht, dl wie folgt zu verwenden:

aber ich habe eine harte Zeit, um die CSS arbeiten dafür zu bekommen. z.B. Ich brauche einen zusätzlichen Hintergrund für jeden Satz von a, dt und dd, und ich möchte nicht 3 verschiedene Bilder verwenden, um den Hintergrund zu kombinieren. so jetzt denke ich eine Reihe von div-Tags zu verwenden, um dies zu tun:

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

das Problem mit diesem Layout ist, dass es mir nicht semantische sieht. Ich könnte es in der li mit einer ungeordneten Liste umwickeln, aber das scheint wie extra Markup.

vielleicht bin ich nur zu wählerisch, aber ich will herausfinden, ob es eine gute Lösung dafür gibt. Es ist eine ziemlich lange Frage und danke, dass du es bis zum Ende gelesen hast.

Answer 1

Ich würde sagen, dass <DL> für diesen Zweck verwendet <DIV> tatsächlich ist weniger semantische dann mit - du bist ganz sicher nicht eine Definition Liste erstellen.

Link, Header und Absatz in einem div verpackt scheinen für mich vollkommen akzeptabel. Sie können stattdessen versuchen, eine ungeordnete Liste zu verwenden. aber Sie werden wahrscheinlich die gleichen (oder schlimmer, als Sie keine dt/dd Trennung mehr haben) Probleme mit CSS haben, wie Sie mit <DL> getan haben. Außerdem wird die Verwendung von Header-Tags nicht innerhalb des Listenelements validiert. Sie müssen also auf einen anderen Absatz/div/span zurückgreifen - definitiv weniger als ideal.

aktualisieren (basierend auf idrumgood ‚s Kommentar unten):
Header (und andere Elemente auf Blockebene) validiere innerhalb ungeordnete Listeneintrag, so vielleicht die folgende Vorgehensweise sowohl semantische wäre und arbeiten mit Ihrem 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

Ich denke, Ihr letzter Beispiel ist perfekt gut. Sie verwenden Tags, die den Inhalt, den sie enthalten, treffend beschreiben, und selbst wenn Sie Ihre Stile deaktivieren würden, wäre die allgemeine Idee der Seite immer noch da (ein Schlüssel zum semantischen Web).

Answer 3

Ich stimme mit Idrumgood, das ist keine Liste von Projekten, es ist eine Reihe von Projekten. Benutze die Divs, es ist eine vollkommen gültige Verwendung davon. Wenn Sie HTML5 verwenden, würden Sie "Abschnitt" für jedes Element und "Abbildung" für den Screenshot verwenden.