画像とのリンク：背景と<img>

画像付きのテキストを使用して内部のページまたはカテゴリにリンクする場合、（意味論的に）ベストプラクティスと見なされるものは何ですか？

オプション1

<nav>
    <a href="/kittens">
        <img src="kittens.png" />
        <span>Kittens</span>
    </a>
    <a href="/puppies">
        <img src="puppies.png" />
        <span>Puppies</span>
    </a>
</nav>

オプション2

<nav>
    <a href="/kittens" class="kittens">Kittens</a>
    <a href="/puppies" class="puppies"><span>Puppies</a>
</nav>

CSSが定義されている場所：

a.kittens {
    background-image:url("kittens.png");
    width:40px;
    height:60px;
}

a.puppies {
    background-image:url("puppies.png");
    width:40px;
    height:60px;
}

リンクのスタイル付き背景、または<img>アンカー要素の内部を使用する必要がありますか？

リンク内にテキストがあり、画像がリンクをサポートしているだけの場合、意味的にはオプション2の方が適切です。

テキストがない場合は、オプションalt1-画像に適切な属性を付ける-が意味的に優れています。

*編集*

アクセシビリティを向上させるために（これは類似していますが、セマンティックマークアップとは異なります）、両方のオプションにtitleアンカー<a>要素の属性を含めることもできます。

これらのタイプのシナリオでは、プレゼンテーションとコンテンツを分離しておくために、ほとんど常に「オプション2」のアプローチを使用します。

可能であれば、CSS内にWebサイトの飾りや装飾を維持することをお勧めします。HTMLは、コンテンツのマークアップに使用する必要があり、丸みを帯びたコーナーやWebページのその他の視覚的側面を追加するためではありません。子猫と子犬の画像がページに美学を加えるだけの場合は、CSSに画像を保持するのがよいでしょう。

ただし、これが当てはまらないと思われるシナリオが少なくとも1つあります。画像ギャラリー。画像ギャラリーは「オプション1」の優れた用途です。その場合、画像のサムネイルがコンテンツであるためです。