Семантическая разметка для ролловеров изображений?

Я работаю над эффектом ролловера для моего сайта, и это в значительной степени сделано. Я использую комбинацию CSS и jQuery.

Это выглядит примерно так...

Введите описание изображения здесь

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

Тем не менее, я получаю предупреждение в Visual Studio, что тег h2 не может быть помещен внутри метки в соответствии с XHTML 1.0 Transitional.

Вот разметка, над которой я работаю с...

<ul>
    <li>
        <a href="/controls/27/saturation-rollover-effect">
            <label class="info">
                <h2>Saturation Rollover Effect</h2>
                <p>Product description here...</p>
            </label>
            <img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
        </a>
    </li>
</ul>

Я также попробовал span вместо label, и я получаю то же самое сообщение. Я также пробовал div, но div не должны быть внутри тега a.

Я бы предпочел сохранить все это внутри ссылки, как у меня есть, чтобы получить выгоду SEO от текста. Но я также хотел бы быть XHTML-совместимым переходным и семантическим / значимым одновременно. Есть идеи?

2 2
html css semantic-markup

2 ответа:

A label - это элементы формы, а не образы.

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

HTML5 ввел figure и figcaption, которые могут быть уместны в этой ситуации:

Http://html5doctor.com/the-figure-figcaption-elements/

Что касается обертывания его в тег a, то это, вероятно, не имеет смысла, если href не разрешает допустимый URI без JavaScript. Так как это переворот. эффект, щелчок по ссылке не будет применим.

5

После небольшого переосмысления я придумал кое-что, что работает и имеет смысл, я думаю...

<ul>
    <li>
        <div class="info">
            <h2><a href="/controls/27/saturation-rollover-effect">Saturation Rollover Effect</a></h2>
            <p>Product description here...</p>
        </div>
        <a href="/controls/27/saturation-rollover-effect"><img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" /></a>
    </li>
</ul>

Мне пришлось оторвать подпись от ссылки вокруг изображения. Затем я добавил ссылку вокруг названия продукта (что, вероятно, более полезно для SEO в любом случае). И это действительно XHTML. Спасибо Дэвиду Томасу и BoltClock за комментарии.

Обновление:

Теперь это в прямом эфире на моем сайте. Он функциональен в IE8, но не так хорош, как в IE9, Chrome или Браузер firefox. И тогда я мог бы сделать миниатюры оттенками серого для более чистого взгляда. В целом это, кажется, работает довольно хорошо, хотя... http://www.silverlightxap.com/

2