Chaque site a un logo, qu’il s’agisse d’une fonction de remplissage de page ou d’un petit élément de conception, il constitue souvent la fonction de titre principale de votre page. Cet article explique comment implémenter un logo à l'aide d'un balisage sémantique correct et d'un code HTML simple, avec toute la présentation effectuée via CSS.
Cela garantira que ceux qui naviguent sur votre site sans images verront une alternative décente, et fourniront aux moteurs de recherche une représentation correcte du titre de votre page.
Commençons par le code HTML. Il doit être aussi simple que possible et ne montrer que le nom de votre site / logo entre des balises d’entête et un lien:
Une fois que le code HTML est en place, il suffit simplement de le styler avec du code CSS simple.
Ce CSS fait deux choses principales:
- Il indique au navigateur de créer une certaine zone pour votre logo et d’appliquer un fond
- Il déplace le texte actuel à afficher hors de vue (9 999 pixels vers la gauche)
Si une personne navigue sur votre site avec les CSS et les images activées, elle verra votre magnifique logo. Sinon, l'image d'arrière-plan ne s'affichera pas - mais le retrait du texte ne s'appliquera pas non plus - ce qui signifie qu'ils verront votre titre comme normalement. Parfait!
C'est un moyen simple mais efficace de vous assurer que votre logo s'affiche correctement, reste accessible et est correctement repris par les moteurs de recherche.