语义缩略图指示答案

【问题标题】：Semantic Thumbnail Indication语义缩略图指示
【发布时间】：2010-11-04 07:43:10
【问题描述】：

给定以下图片链接：

<a href="path/to/img.jpg">Title</a>

指示缩略图位置的语义最合理的方法是什么？

到目前为止，我能想到的最好的方法是使用 data- 属性，如下所示：

<a href="path/to/img.jpg" data-thumb="path/to/thumb.jpg">Title</a>

但是，它在语义上似乎不太合理。有没有更好或更正确的方法来做到这一点？

【问题讨论】：

【解决方案1】：

为什么不使用<img> 元素？你可以给它一个类来表明它是一个缩略图，如果你需要的话，可以通过渐进增强来隐藏它。这样，图像的缩略图将在没有 JavaScript/CSS 的情况下显示：

<a href="path/to/img.jpg">
    <img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
    Title
</a>

还是我太天真了？

【讨论】：

如果缩略图在语义上不重要（它是链接资源的预览），它应该得到空的替代文本（alt=""）。 alt 属性应该被认为是图像内容的替代品（毕竟它是“替代”内容），而不是标签或解释。对此类要求使用 title 属性。
@MikkoRantalainen：感谢您的澄清。

【解决方案2】：

<a href="path/to/img_thumb.jpg">Title</a>

简单并保持原始路径不变，同时只需添加后缀以指示图像是缩略图。我们一直在我们的网站上使用它，它使事情变得简单。

【讨论】：