Semantische HTML-Struktur für einen Satz von Bildverbindung (mit Hover-Effekt), Titel und eine Beschreibung?

Question

Ich habe eine Menge von Elementen (oder eine Liste der Elemente, aber ich will nicht die Verwendung der Liste implizieren), sie enthalten einen Bildlink, einen Titel und eine Beschreibung ein. Die Bildlink benötigt eine Hover-Effekt (alpha ändert sich, wenn die Maus über), und es gibt eine gewisse Art, wie ich möchte, dass sie legen: Bild auf der linken Seite, dann Titel und die Beschreibung auf der rechten Seite. auch ist es Hintergrund für den gesamten Block von Elementen.

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

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

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

, aber ich habe eine harte Zeit, die CSS zu erhalten für diese Arbeit. z.B. Ich brauche einen zusätzlichen Hintergrund für jeden Satz von einem, dt und dd, und ich möchte nicht, dass drei verschiedene Bilder verwenden, um den Hintergrund zu kombinieren. so jetzt ich denke ein paar divs 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 aussehen semantischer. Ich konnte es wickeln im li mit einer ungeordneten Liste um, aber das scheint wie zusätzliche Markup.

vielleicht bin ich einfach zu pingelig, aber ich möchte sie herausfinden, ob es eine gute Lösung für dieses ist. es ist eine recht lange Frage, und wir danken Ihnen für es bis zum Ende zu lesen.

Answer 1

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

Link, Kopf- und Absatz in einem div gewickelt scheinen mir völlig akzeptabel. Sie können mit ungeordneter Liste stattdessen versuchen; aber Sie haben wahrscheinlich gleiche (oder noch schlimmer, da Sie nicht dt / dd Trennung mehr haben werden) Probleme mit CSS, wie Sie mit <DL> taten. Plus-Tags-Header verwendet, wird nicht entweder innerhalb Listenposition validieren, so dass Sie auf einen anderen Absatz / div / span müssen zurückgreifen -. Auf jeden Fall weniger als ideal

Aktualisieren (basierend auf idrumgood 's Kommentar unten):
Header (und andere Elemente auf Blockebene) validiere innerhalb ungeordneten Listeneintrags, so vielleicht die folgende Vorgehensweise würde beides sein semantische und arbeiten mit Ihrem Stil:

<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 letzteren Beispiel vollkommen gut ist. Sie verwenden Tags, die die Inhalte, die sie enthalten, treffend beschreiben und selbst wenn Sie Ihre Stile auszuschalten waren, die allgemeine Vorstellung von der Seite würde noch da sein (ein Schlüssel zum Semantic Web).

Answer 3

ich mit idrumgood einverstanden ist, dies nicht eine Liste von Projekten ist, ist es eine Reihe von Projekten. Verwenden Sie die divs, ist es eine absolut gültige Nutzung davon. Wenn Sie HTML5 verwendet haben, würden Sie „Abschnitt“ für jedes Element und „Bild“ für den Screenshot verwenden.