5568 sujets

Sémantique web et HTML

Bonjours à tous,
J'ai une petite question concernant le logo d'un site en html5.

Je me demande quelle est la meilleure méthode :

<hgroup id="logo">
<h1><a href="/" title="Retour vers la page d'accueil">MonDomain.com</a></h1>
<h2>Mon slogan</h2>
</hgroup>


Puis "designer" le logo avec du css (par exemple)

hgroup#logo{
background: url(logo.png) no-repeat;
text-indent: -9999px;
width: 150px;
height: 50px;
}


Ou directement

<div id="logo"><a href="/" title="Retour vers la page d'accueil"><img src="logo.png" alt="MonDomain.com"></a></div>


Quelle est la meilleure méthode pour le référencement et accessibilité?!
Modifié par semantic (21 Feb 2013 - 15:13)
En fait je vais sans doute me répondre seul. Je viens de lire que google n'aime pas les textes cachés. Donc c'est plutôt la deuxième solution qu'il faut adopter Smiley smile

a écrit :
L'utilisation de texte ou de liens cachés dans votre contenu en vue de manipuler le classement des résultats de recherche Google peut être considérée comme une technique trompeuse et constitue une infraction aux Consignes aux webmasters de Google. Les contenus textuels (tels qu'un nombre excessif de mots clés) peuvent être cachés de plusieurs manières, dont les suivantes :

utilisation d'un texte blanc sur fond blanc ;
placement d'un texte derrière une image ;
utilisation de CSS pour positionner du texte en dehors de l'écran ;
définition de la taille de la police sur 0 ;
dissimulation d'un lien en ne le faisant porter que sur un seul caractère de petite taille (un trait d'union au milieu d'un paragraphe, par exemple).


Je donne le lien pour ceux que ça intéresse :

Texte et liens cachés
Modifié par semantic (21 Feb 2013 - 15:27)
La première solution est à éviter à tout prix (si l'image ne se charge pas, tu perds toute info).

Le mieux à faire, c'est :

<hgroup id="logo">
<h1><a href="/" title="Retour vers la page d'accueil"><img src="logo.png" alt="MonDomain.com"></a></h1>
<h2>Mon slogan</h2>
</hgroup>
Merci beaucoup pour ton aide.
J'avais pas pensé à mettre l'image dans la balise H1 Smiley lol .
Par contre, je viens de lire un article intéressant qui explique qu'il est indispensable de mettre l'attribut alt lors de l'utilisation de cette méthode.
ça me semble logique mais je le précise pour ceux que ça intéresse.