web-dev-qa-db-fra.com

Liaison avec une image: Contexte vs <img>

Qu'est-ce qui est considéré comme la meilleure pratique (sémantique) lors de l'utilisation de texte avec une image pour créer un lien vers une page interne ou une catégorie?

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;
}

Devrais-je utiliser un arrière-plan stylé pour le lien ou un <img> à l'intérieur de l'élément d'ancrage?

linksimageshtml5
8
Petrus Theron

Si vous avez du texte dans le lien et que l'image ne fait que supporter le lien, sémantiquement option deux serait préférable.

Si vous n'aviez pas le texte, l'option 1 - avec un attribut approprié alt sur les images - serait sémantiquement meilleure.

* edit *

Pour une meilleure accessibilité (similaire, mais différente du marquage sémantique), vous souhaitez également inclure les attributs title sur les éléments d'ancrage <a> dans les deux options.

2
ajcw

J'utilise presque toujours une approche "Option 2" dans ces types de scénarios, dans le but de conserver ma présentation et . ) contenu séparé.

Si cela est possible, il est recommandé de conserver les détails superficiels ou décoratifs de votre site Web dans CSS. HTML doit être utilisé pour baliser du 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 ne font qu'ajouter une esthétique à votre page, conserver les images dans votre code CSS est la meilleure solution.

Il y a au moins un scénario où je ne crois pas que ce soit le cas, cependant; galeries d'images. Une galerie d'images serait un excellent usage de "Option 1", car dans ce cas, les vignettes d'images représentent le contenu.

1
Jacob Hume