語義縮略圖指示

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

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

簡單並保持原始路徑完好，只需添加後綴以指示圖像是縮略圖即可。我們一直在我們的網站上使用它，它使事情變得簡單。

Answer 2

爲什麼不使用<img>元素？您可以給它一個課程，以表明它是一個縮略圖，如果需要，可以用漸進增強來隱藏它。這樣，圖像的縮略圖將顯示在沒有JavaScript/CSS的情況下：

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

或者我是否太天真？