链接图像：背景与<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>对锚元素使用内部样式？

如果链接中包含文本，而图像仅支持该链接，则从语义上讲第二种更好。

如果您没有文本，则选项一（alt在图像上具有适当的属性）在语义上会更好。

*编辑*

为了提高可访问性（这是相似的，但不同于语义标记），您还希望在两个选项中title的锚<a>元素上都包含属性。

在这些类型的场景中，我几乎总是使用“选项2”方法，以使我的演示文稿和内容保持分开。

如果可能的话，最好在CSS中保留网站的任何装饰或装饰方面。HTML应该用于标记内容，而不是用于添加圆角或网页的其他视觉效果。如果您的小猫和小狗图片只是在页面上增加了美感，那么将图片保存在CSS中是您的最佳选择。

但是，至少有一种情况我不认为是这种情况。图片库。图像库将是“选项1”的绝佳用法，因为在这种情况下，图像缩略图就是内容。