Qu'est-ce qui est considéré comme la meilleure pratique (sémantiquement) lors de l'utilisation de texte avec une image pour créer un lien vers une page ou une catégorie interne?
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>
où le CSS est défini:
a.kittens {
background-image:url("kittens.png");
width:40px;
height:60px;
}
a.puppies {
background-image:url("puppies.png");
width:40px;
height:60px;
}
Dois-je utiliser un arrière-plan stylisé pour le lien ou l' <img>
intérieur de l'élément d'ancrage?
J'utilise presque toujours une approche «Option 2» dans ces types de scénarios, dans un effort pour garder ma présentation et mon contenu séparés.
Il est recommandé de conserver les fioritures ou les aspects décoratifs de votre site Web dans CSS si possible. Le HTML doit être utilisé pour baliser le contenu, et non pour ajouter des coins arrondis ou d'autres aspects visuels de votre page Web. Si vos images de chaton et de chiot ajoutent simplement de l'esthétique à votre page, il est préférable de conserver les images dans votre CSS .
Il y a au moins un scénario où je ne pense pas que ce soit le cas, cependant; galeries d'images. Une galerie d'images serait une excellente utilisation de "l'option 1", car dans ce cas, les miniatures des images sont le contenu.
la source