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

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 是可以接受的，尽管您通常希望将其用于更大的内容 block 。

HTML5 引入了 figure 和 figcaption 可能适合这种情况:

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

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