¿Qué se considera mejor práctica (semánticamente) cuando se usa texto con una imagen para vincular a una página o categoría interna?
Opción 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>
opcion 2
<nav>
<a href="/kittens" class="kittens">Kittens</a>
<a href="/puppies" class="puppies"><span>Puppies</a>
</nav>
donde se define el CSS:
a.kittens {
background-image:url("kittens.png");
width:40px;
height:60px;
}
a.puppies {
background-image:url("puppies.png");
width:40px;
height:60px;
}
¿Debo usar un fondo con estilo para el enlace o <img>
dentro del elemento de anclaje?
Casi siempre uso un enfoque de "Opción 2" en este tipo de escenarios, en un esfuerzo por mantener mi presentación y contenido separados.
Es una buena práctica mantener cualquier adorno o aspecto decorativo de su sitio web dentro de CSS si es posible. El HTML debe usarse para marcar el contenido y no para agregar esquinas redondeadas u otros aspectos visuales de su página web. Si las imágenes de su gatito y cachorro solo están agregando estética a su página, mantener las imágenes en su CSS es el camino a seguir .
Sin embargo, hay al menos un escenario en el que no creo que este sea el caso; galerías de imágenes. Una galería de imágenes sería un excelente uso de la "Opción 1", porque en ese caso las miniaturas de las imágenes son el contenido.
fuente