图像标题翻转的语义标记？

Question

我正在为我的网站制作图片标题翻转效果，并且已经完成了。我正在使用CSS和jQuery的组合。

它看起来像这样......

效果很好。鼠标悬停在图像上时，标题会显示在图像的左侧。

但是，我在Visual Studio中收到警告，根据XHTML 1.0 Transitional，h2标签不能放在标签内。

这是我正在使用的标记...

<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

label用于表单元素 - 而不是图像。

h2是可以接受的，但您通常希望将其用于较大的内容块。

HTML5引入了figure和figcaption，这可能适用于这种情况：

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

至于将它包装在a标签中，除非href解析为有效的URI，否则这可能没有意义。由于它是翻转效果，因此单击链接不适用。

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。感谢David Thomas和BoltClock的评论。

更新：

现在我的网站上有。它在IE8中运行，但不如IE9，Chrome或Firefox那么漂亮。然后我可能会使缩略图灰度以获得更清晰的外观。总的来说，它似乎工作得很好...... http://www.silverlightxap.com/