Concernant les liens avec les balises hn

Bonjour,

J'ai (relu) avec intérêt les articles suivants:

http://www.alsacreations.com/astuce/lire/43-comment-dfinir-lapparence-de-ses-liens.html
http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html

1) J'aimerai savoir s'il y a une norme définie concernant l'utilisation des liens avec une balise de type hn ?

Exemple:

Est-ce qu'on écrit plutôt <a href="#"><h1>Mon titre</h1></a>

ou <h1><a href="#">Mon titre</a></h1>

Merci par avance pour votre retour sur cette question de base existentielle ^^

2) La question qui va avec est: est-ce que ça a de l'influence sur les liens en hover ?

Il semblerait que oui car d'après quelques tests il me semble que Chrome et Firefox réagissent différemment sur ce point.

3) Dernière question: est-ce que vous conseillez (ou pas) l'utilisation de balises h1 dans le fil d'ariane ? (exemple titre de la page)


Cotp
PS : je précise que j'ai cherché via la "recherche" sans succès avent de poster, si quelqu'un connait un autre sujet sur le même thème, je suis bien évidemment preneur
Modifié par Cotp (29 Apr 2011 - 12:40)

Bonjour,

La réponse va être plus rapide que prévue :
La syntaxe

<a href="#"><h1>Mon titre</h1></a>

est invalide : il n'est pas autorisé de placer un élément de type bloc (h1) au sein d'un élément de type inline (a) sauf si tu es en HTML5

Pour ce qui est des différences d'affichage, c'est assez logique puisque les éléments blocs tels que h1 disposent de marges et propriétés de rendu par défaut.
Modifié par Raphael (29 Apr 2011 - 15:00)

Raphael a écrit :
Bonjour,

La réponse va être plus rapide que prévue :
La syntaxe

<a href="#"><h1>Mon titre</h1></a>

est invalide : il n'est pas autorisé de placer un élément de type bloc (h1) au sein d'un élément de type inline (a) sauf si tu es en HTML5

Merci Raphaël pour ta réponse (j'administre moi même un forum et je te suis vraiment gré de répondre aux questions de nouveaux membres), je me demande même comment tu trouves le temps , en tout cas dorénavant je ne ferai plus cette faute.

Raphael a écrit :
Pour ce qui est des différences d'affichage, c'est assez logique puisque les éléments blocs tels que h1 disposent de marges et propriétés de rendu par défaut.

Est-ce que tu peux m'en dire plus ? En fait je parlais de rendu concernant les "hover" certains apparaissent bien en couleur sous Chrome, d'autres pas sous Firefox, je vais essayer de te chercher un exemple pour illustrer mon propos.


Je prolonge ce billet par une autre question, est-il possible selon toi de placer une balise h1 dans un fil d'ariane (exemple titre de la page).

Si ce titre ce répète ensuite dans la page est-ce qu'il est recommandé de ne pas le doublonner ?

Comme je fais du SEO, je me demandais si la taille de la police de caractère utilisé en CSS pour afficher le h1 avait de l'importance pour Google.

Je vais plus loin, certains de mes collègues m'ont parlé d'intégrer divers éléments dans une balise h1 et de la scinder en css avec des span. Est-ce une technique "propre" ? Exemple

<h1>Livres - Roman - <span class="title">Le Petit Prince</span></h1>

@++ et encore merci pour ta réponse,


Cotp
Modifié par Cotp (03 May 2011 - 01:31)

Bonjour,

Cotp a écrit :

Est-ce que tu peux m'en dire plus ? En fait je parlais de rendu concernant les hover certains apparaissent bien en couleur sous Chrome, d'autres pas sous Firefox, je vais essayer de te chercher un exemple pour illustrer mon propos.

Si le problème porte uniquement sur les hover, je ne pense pas que ce soit normal. Il s'agit sûrement d'une erreur dans la feuille de styles. Mais sans exemple en ligne, impossible d'en dire plus en effet

Cotp a écrit :

Je prolonge ce billet par une autre question, est-il possible selon toi de placer une balise h1 dans un fil d'ariane (exemple titre de la page).

Si ce titre ce répète ensuite dans la page est-ce qu'il est recommandé de ne pas le doublonner ?

Ce qui compte, c'est que la hiérarchie des titres de ton document soit logique et sémantique. A priori, on ne trouve pas d'élément h1 (ni autre élément hiérarchique) dans un fil d'ariane, mais comme titre principal de document (ou alors ce serait un peu tordu quand même).

Pour ce qui est d'avoir un ou plusieurs h1, je te conseille de faire avec la logique de ton document. Personnellement, je n'ai pas rencontré beaucoup d'exemples où plusieurs titres de niveau 1 étaient nécessaires… [edit : dans tous les cas, ça dépend de la structure de ton document].

Cotp a écrit :

Comme je fais du SEO, je me demandais si la taille de la police de caractère utilisé en CSS pour afficher le h1 avait de l'importance pour Google.

Jusqu'à preuve du contraire, non. Ce serait d'ailleurs un peu ridicule (celui qui <del>a la plus grosse</del> <ins>écrit le plus gros</ins> serait alors le mieux référencé ? )

Pour voir avec les yeux de GoogleBot, tu peux aller faire un tour sur webmaster tools pour scanner ton site avec sa « vision » à lui. Pas d'images, pas de vidéos, pas de styles (sauf a repérer les petits malins qui mettent un titre h1 rouge sur fond rouge pour le SEO : direction la sandbox ).

Cotp a écrit :

Je vais plus loin, certains de mes collègues m'ont parlé d'intégrer divers éléments dans une balise h1 et de la scinder en css avec des span. Est-ce une technique &quot;propre&quot; ? Exemple

<h1>Livres - Roman - <span class="title">Le Petit Prince</span></h1>

L'élément span étant un élément vide de sens, ça n'a aucune incidence (et ça peut permettre de faire des distinctions visuelles d'éléments avec CSS au sein d'une balise <hn>, <p>, etc. Donc oui, c'est à utiliser, en essayant de ne pas tomber dans l'excès (la spannite pose souvent des problèmes de maintenance du code à long terme )
Modifié par audrasjb (03 May 2011 - 13:11)