O que é considerado uma prática recomendada (semântica) ao usar texto com uma imagem para vincular a uma página ou categoria interna?
Opção 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>
opção 2
<nav>
<a href="/kittens" class="kittens">Kittens</a>
<a href="/puppies" class="puppies"><span>Puppies</a>
</nav>
onde o CSS é definido:
a.kittens {
background-image:url("kittens.png");
width:40px;
height:60px;
}
a.puppies {
background-image:url("puppies.png");
width:40px;
height:60px;
}
Devo usar um plano de fundo com estilo para o link ou um <img>
elemento interno da âncora?
Eu quase sempre uso a abordagem "Opção 2" nesses tipos de cenários, em um esforço para manter minha apresentação e conteúdo separados.
É uma boa prática manter todos os aspectos decorativos ou decorativos do seu site em CSS, se possível. O HTML deve ser usado para marcar o conteúdo, e não para adicionar cantos arredondados ou outros aspectos visuais da sua página da web. Se suas imagens de gatinhos e filhotes estão apenas adicionando estética à sua página, manter as imagens em seu CSS é o caminho a seguir .
Há pelo menos um cenário em que não acredito que seja esse o caso; galerias de imagens. Uma galeria de imagens seria um excelente uso da "Opção 1", pois nesse caso as miniaturas das imagens são o conteúdo.
fonte