Linking with an image: Background vs <img>
- by FreshCode
What is considered best practice (semantically) when using text with an image to link to an internal page or category?
Option 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>
Option 2
<nav>
<a href="/kittens" class="kittens">Kittens</a>
<a href="/puppies" class="puppies"><span>Puppies</a>
</nav>
where the CSS is defined:
a.kittens {
background-image:url("kittens.png");
width:40px;
height:60px;
}
a.puppies {
background-image:url("puppies.png");
width:40px;
height:60px;
}
Should I use a styled background for the link, or an <img> inside the anchor element?
