web-dev-qa-db-fra.com

Quelle est la bonne façon d'afficher un logo avec CSS?

J'ai récemment appris le CSS et la série de didacticiels que je regarde indique que la meilleure façon d'afficher une image de logo est d'envelopper le texte dans une balise H1, puis de définir le style CSS de cette balise sur l'image d'arrière-plan, avec un texte retrait de -99999 ou nombre similaire.

Cela semble incroyablement hackish et inélégant. Il semble également que l'utilisation de CSS pour masquer du texte serait un grand non-non à des fins de référencement (car masquer du texte via CSS est mal vu).

J'ai également lu que l'utilisation d'une img devrait être évitée, car le logo lui-même n'est pas vraiment contenu, il devrait donc être relégué au côté conception du codage (c'est-à-dire CSS).

Quel est le consensus actuel à ce sujet?

cssgraphical-logo
11
Mike Manfrin

La manière correcte d'afficher un logo est avec un <img> élément. Si vous n'avez pas étudié logos et logotype , vous ne réaliserez peut-être pas qu'un logo a sa propre sémantique et doit être présenté d'une manière très spécifique. Il peut également avoir une interprétation requise, qui doit être utilisée dans le [alt] attribut.

Si cette interprétation requise est légitimement un en-tête de la page, il serait sémantiquement correct de l'ajouter à un <h#> élément:

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

En règle générale, le logo est utilisé comme lien, il est donc courant de voir:

<a href="/">
    <img src="logo.png"... />
</a>

De plus, le logo peut être accentué (peut être soit <strong> ou <em> selon le degré):

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

Comprendre la sémantique d'un logo. Si vous faites référence à la société Coca-cola, le logo de la marque ne changerait pas et ne devrait pas changer si vous avez remplacé ou supprimé une feuille de style. La plupart des gens comprennent que sémantiquement,

the Coca-Cola logo

est différent de

the Pepsi logo

15
zzzzBov

J'enroule toujours une balise d'ancrage autour d'une image:

<a href=""><img src=""></a>

ou créez la balise d'ancrage en tant que bloc et définissez une image d'arrière-plan

<a class="logo" href="">Logo</a>

.logo { 
         background: url("/path") no-repeat; 
         width: 100px; 
         height: 100px; 
         display: block; 
         text-indent: -9999px;
}
7
chadpeppers

Vous devez toujours utiliser img pour afficher le logo. En utilisant h1 et utiliser le logo comme arrière-plan est une très mauvaise pratique et doit être évité. Votre logo est le contenu et non un h1.

Harry Roberts l'a expliqué clairement dans son message - Votre logo est une image, pas un <h1>

4
apnerve

Je pense que ça n'a pas vraiment d'importance. Il existe de nombreuses façons différentes de le faire, et elles sont toutes prises en charge. Ils fonctionnent tous. La plupart d'entre eux sont compatibles avec les moteurs de recherche et parfaitement accessibles.

Je ferais quelque chose comme ça:

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>

Les moteurs de recherche, les navigateurs en mode texte et les lecteurs d'écran voient le texte alternatif, tout le monde voit l'image du logo.

2
Wander Nauta