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>

画像がサムネイルであることを示すサフィックスを追加するだけで、元のパスはそのまま維持されます。私たちはこれを私たちのサイトで常に使用しており、物事が簡単になります.