语义缩略图指示

Question

给出以下图像链接：

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

用于指示缩略图位置的最具语义声音的方法是什么？

到目前为止我能想到的最好的方法是使用data-这样的属性：

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

然而，它似乎没有语义上的声音。有更好或更正确的方法吗？

Answer 1

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

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

或者我太天真了？

Answer 2

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

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