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

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 标记内。

我更愿意将所有这些内容保留在链接内，就像我拥有它一样，可以从文本中获得搜索引擎优化的好处。但我也希望能够兼容 XHTML Transitional，并且同时具有语义/意义。有什么想法吗？

Answer 1

标签 用于表单元素，而不是图像。

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

HTML5 引入了 figure 和 figcaption，它们可能适合这种情况：

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

至于将其包装在 a 标记中，这可能没有意义，除非href 解析为没有 JavaScript 的有效 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/