html - 语义缩略图指示

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>

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