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

Question

Я работаю над эффектом пролонгации подписи к изображению для своего сайта, и он почти готов.Я использую комбинацию 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 Transitional-совместимым, и в то же время смысловым / осмысленным.Есть идеи?

Answer 1

A label для элементов формы, а не для изображений.

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

В HTML5 введены figure и figcaption, которые могут быть подходящими вэта ситуация:

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

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

Answer 2

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

<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 за комментарии.

UPDATE:

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