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

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

2 голосов
/ 03 августа 2009

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

вот скриншот того, как я хочу, чтобы он выглядел: альтернативный текст 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 с неупорядоченным списком, но это похоже на дополнительную разметку.

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

Ответы [ 3 ]

2 голосов
/ 03 августа 2009

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

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

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

0 голосов
/ 03 августа 2009

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

...