Семантическая HTML-структура для набора ссылок на изображения (с эффектом наведения), заголовка и описания?

Question

У меня есть набор элементов (или список элементов, но я не хочу подразумевать использование списка), они содержат ссылку на изображение, заголовок и описание. Ссылка на изображение нуждается в эффекте наведения (альфа изменяется при наведении курсора мыши), и есть определенный способ их размещения: изображение слева, затем заголовок и описание справа. также есть фон для всего блока элементов.

вот скриншот того, как я хочу, чтобы он выглядел: альтернативный текст http://img26.imageshack.us/img26/9806/screenshothmr.png

Итак, мой вопрос, что такое хорошая семантическая структура HTML для этого? я пытался использовать дл, как это:

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

Но мне трудно заставить CSS работать на это. например Мне нужен дополнительный фон для каждого набора a, dt и dd, и я не хочу использовать 3 разных изображения, чтобы объединить фон. так что теперь я думаю использовать кучу div для этого:

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

проблема с этим макетом в том, что он не выглядит для меня семантическим. я мог бы обернуть это в li с неупорядоченным списком, но это похоже на дополнительную разметку.

Может быть, я слишком разборчив, но я хочу выяснить, есть ли хорошее решение для этого. это довольно длинный вопрос, и спасибо, что дочитали его до конца.

Answer 1

Я бы сказал, что использование <DL> для этой цели на самом деле менее семантическое, чем использование <DIV> - вы наверняка не создаете список определений.

Ссылка, заголовок и абзац, заключенные в div, кажутся мне вполне приемлемыми. Вместо этого вы можете попробовать использовать неупорядоченный список; но у вас, вероятно, будут те же (или еще хуже, так как у вас больше не будет разделения dt / dd) проблемы с CSS, как у вас с <=>. Кроме того, использование тегов заголовка также не будет проверяться в элементе списка, поэтому вам придется прибегнуть к другому абзацу / div / span - определенно менее чем идеально.

Обновление (на основе комментария idrumgood ниже):
Заголовок (и другие элементы уровня блока) проверяются в неупорядоченном элементе списка, поэтому, возможно, следующий подход будет и семантическим, и будет работать с вашими стилями:

<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

Я думаю, что ваш последний пример совершенно хорош. Вы используете теги, которые точно описывают содержимое, которое они содержат, и даже если бы вы отключили свои стили, общая идея страницы все равно была бы там (ключ к семантической сети).

Answer 3

Я согласен с idrumgood, это не список проектов, это набор проектов. Используйте div, это вполне допустимое использование. Если бы вы использовали HTML5, вы бы использовали & Quot; section & Quot; для каждого элемента и " figure " для скриншота.