Les balises imbriquées et les standards

[xou]

Bonjour,

je m'occupe actuellement de la refonte du site de ma boite et je me trouve devant un dilème car les titres de ma page (balises h) doivent être en deux couleurs, donc je devrais avoir mes titres constitués de la sorte:

<h1><span class="couleur1">Le joli titre</span><span class="couleur2"> que voil&agrav;</span></h1>

qu'en est-il par rapport aux recommandations du w3c !? et quel est votre avis là dessus?

Je me rapelle avoir vu un article traitant du sujet mais je n'arrive pas à remettre la main dessus et il me semble avoir lu un avis défavorable à ce genre de constitution de code dans cet article.

Modifié 14 Juin 2006 par xou

[captain_torche]

Techniquement, comme span est une balise neutre de toute signification, je ne vois pas en quoi cela pourrait porter atteinte à quoi que ce soit.

Mais j'attends l'avis de plus expérimentés

[Dudu]

Salut

qu'en est-il par rapport aux recommandations du w3c !? et quel est votre avis là dessus?

Je me rapelle avoir vu un article traitant du sujet mais je n'arrive pas à remettre la main dessus et il me semble avoir lu un avis défavorable à ce genre de constitution de code dans cet article.

Tu as le droit, rien ne t'interdit de mettre un <span> dans un <h1>.

Cela étant, moins il y aura de <span> plus tu seras sémantique.

En effet <span> et <div> sont les deux balises neutres de l'(X)HTML (la première est 'inline', la deuxième est 'block' c'est leur seule différence)

Donc tu aurais tout intérêt à plutôt avoir un code du genre

<h1>Le joli titre <span class="couleur2"> que voil&agravE;</span></h1>

et d'associer ta première couleur au <h1> (s'il y a plusieurs <h1> tu devrais t'y retrouver avec les id)

Continuons Appeler une class "couleur2" n'est pas très bon. Utiliser une description succinte est préférable. En admettant que ta class s'appelle "orange" que feras-tu quand tu changeras de design et qu'elle deviendra bleu ?

<h1>Le joli titre <span class="title"> que voil&agravE;</span></h1>

Toujours mieux: tu peux cibler en CSS le <span> qui sera contenu dans ton <h1>. Donc pourquoi s'embêter avec une class ?

<h1>Le joli titre <span>que voilà</span></h1>

Et en poussant encore un peu le vice, pourquoi finalement ne pas avoir plus de sémantique ?

<h1>Le joli titre</h1><h2>que voilà</h2>

Prendre ce code-là nécessiterait de retravailler un peu la CSS pour garder le même effet visuel, mais ce serait plus sémantique.

À voir, selon le reste du code

PS: je déplace le topic dans la section XHTML/CSS car le rapport avec le référencement me semble un peu léger

[xou]

merci pour ces explications plus que détaillées !!

Pour ce qui est des noms des classes ils ne correspondent pas à ce que je donnais comme exemple, et pour ce qui est de sa constitution c'est parce que j'ai des h1 en rouge et les couleurs blue et orange ne sont pas utilisées que pour mes h1 mais également des h2 et h3, et quelques éléments de texte.

Mais c'est vrai que je pourrais supprimer quelques span:

<h1 class="red">Le super titre</h1>
<h1 class="blue">Le super <span class="orange">titre</span></h1>

Pour les couleurs c'est pas demain la veille que ma boite va changer de charte, donc je me simplifie la tâche en les nommant directemment mais c'est vrai que c'est uniquement dans un soucis de rapidité.

Et en poussant encore un peu le vice, pourquoi finalement ne pas avoir plus de sémantique ?

<h1>Le joli titre</h1><h2>que voilà</h2>

Prendre ce code-là nécessiterait de retravailler un peu la CSS pour garder le même effet visuel, mais ce serait plus sémantique.

Ca c'est pas con j'y avais jamais pensé, ca permet de ne mettre en avant que la partie du titre la plus importante. Merci pour le tip !

[Monique]

Bonjour,

Belle démonstration de simplification progressive du code, Dudu

Par contre je ne suis pas d'accord avec ta dernière proposition...

Et en poussant encore un peu le vice, pourquoi finalement ne pas avoir plus de sémantique ?

<h1>Le joli titre</h1><h2>que voilà</h2>

Prendre ce code-là nécessiterait de retravailler un peu la CSS pour garder le même effet visuel, mais ce serait plus sémantique.

La sémantique ne serait-elle pas :

h1 est un titre de section, de niveau 1

h2 est un titre de sous-section, de niveau 2... soit une sous-section de h1

Ton exemple n'y colle pas vraiment, me semble-t-il

[Eric (11)]

Puisque tu abordes ce sujte Monique je me permet donc de le continuer, "sémantiquement" parlant ! Enfin si l'on peut dire cela, utiliser une balise hn uniquement pour la mise en forme et non pour le contexte ne me semble pas sémantique ! c'est comme si l'on coupait un paragraphe en plusieurs partie pour mettre du gras ou autre via css !

Je préfére l'avant dernière solution avec utilisation du span, d'ailleurs la définition du span "Cette balise sert à particulariser un sous-élément pour y appliquer une mise en forme spéciale." :-)

Cordialement, Eric.

[Monique]

Tout à fait d'accord avec toi, Eric.

Tu as fort bien exprimé, comme j'aurais dû le faire, ce que je n'avais fait que suggérer

[xou]

Je suis tout à fait d'accord avec vous et c'est comme celà que je l'utilise mais prenons le cas de figure:

<h1>Annonces d'emploi</h1><h2> - traduction</h2>

<h1>Annonces d'emploi</h1><h2> - immobilier</h2>

L'exemple ne s'y preterait-il pas ?

[Eric (11)]

Alors sur deux pages différentes, oui pourquoi pas ! mais sur une seule page je verrais plutôt :

<h1>Annonces d'emploi</h1>

<h2> - traduction</h2>

<h2> - immobilier</h2>

D'ailleurs sur deux pages je verrais également :

Page 1 :

<h1>Annonces d'emploi</h1>

<h2>Traduction</h2>

Page 2 :

<h1>Annonces d'emploi</h1>

<h2>Immobilier</h2>

Eric.

[xou]

Ouais donc ce serait bel et bien une façon de détourner leur usage !

Dans le même genre j'ai un autre exemple:

Et que penses tu de certainnes recommandations qu'on m'a fait pour le référencement ? à savoir:

Mettre plusieurs <h1> sur une même page pour mettre en évidence mes rubriques.

Personellement du fait de son importance je n'avais utilisé qu'une h1 et les autres en h2 et h3, mais selon ses dires il faudrait que je passe tout en h1... je reste sceptique.

[Monique]

Tu as bien raison d'être sceptique !

Les exemples ne manquent pas pour démontrer que ce qui est considéré comme important par les moteurs à un moment donné, ne le reste pas toujours... bien souvent suite à des abus (comme les balises meta par exemple).

Par contre, l'utilisation correcte des titres et sous-titres est réellement indipensable pour structurer le contenu (et faciliter le déplacement dans une page aux utilisateurs d'aides techniques), et le restera.

[wonderclochette]

Cette histoire du h1 est je trouve une question vraiment passionnante qui mérite beaucoup mieux que la simple grille de lecture du référencement.

Après tout c'est bien tout l'enchainement structurant des hn qui s'établie par rapport à elle.

donc

Mettre plusieurs <h1> sur une même page pour mettre en évidence mes rubriques

Oui et mille fois oui... Mais pas pour le référencement. Mais bien pour le plus haut degré de pertinence du balisage du document html en lui même.

Car finalement qu'en est il de ce h1 unique ne faisant que répéter de manière appauvrie le title du document (si ce title est bien construit) et devant se résoudre le plus souvent à n'être que le support d'un logo et n'ouvrant rien qui ne soit déjà ouvert (par le title justement). Un simple p ou div feraient aussi bien l'affaire et nos documents n'en auraient que plus fière allure (sans rire, si on utilise l'extension "document map" de firefox c'est criant).

[Monique]

Un ou plusieurs h1 par page... la grande question, souvent débattue, pour laquelle les avis divergent

Un peu de lecture (liste loin d'être exhaustive !) :

- Un ou plusieurs <h1> ?

- Les titre (<h1> ... ), Y a t'il deux <h1> dans la page...

- title et h1, titre de section et titre de document: le malentendu

- <h1> dans des <a> ?, utilisation de <h1>, élément bloc

[Eric (11)]

Comme dit plus haut, je pense que l'utilisation des balises doit se faire en fonction du contenu et non du référencement. Quant à mettre plusieurs h1 sur une même page, pourquoi pas si cela rentre dans la structure du site.

Maintenant à savoir si cela joue sur le référencement, ce n'est pas mon premier soucis et je ne suis pas spécialiste. Suffit de voir la mode du "snippet" actuellement que l'on place avant le h1 !

Eric.

[wonderclochette]

Un ou plusieurs h1 par page... la grande question, souvent débattue, pour laquelle les avis divergent

Un peu de lecture (liste loin d'être exhaustive !) :

- Un ou plusieurs <h1> ?

- Les titre (<h1> ... ), Y a t'il deux <h1> dans la page...

- title et h1, titre de section et titre de document: le malentendu

- <h1> dans des <a> ?, utilisation de <h1>, élément bloc

Oui tous ces liens sont très intéressants. J'observe quand même que nulle part n'est évoquée l'absurdité qu'il y a, très concrètement, à réduire, le plus souvent, le plus haut niveau d'organisation du document à un simple logo et incidemment à un lien "retour page d'accueil". Cela pose je trouve beaucoup de questions sur cette modalité d'utilisation du h1 unique dont on ne peut même plus penser la pertinence.

Je suis bien d'accord qu'il y a des types de contenus où un seul h1 peut tout à fait suffire. Statistiquement parlant j'ai du mal à croire que cela représente la majorité des documents.

[xou]

Merci Monique pour cette compilation de posts des plus intéressante.

C'est vrai que je n'ai jamais eu cette approche (référencement), et que soudain ses préconisations me sont apparues comme farfelues mais j'ai cru découvrir une nouvelle manière de revoir la sémantique de mes pages...

Effectivement le w3c n'a pas cherché à normaliser cet usage mais j'avoue être dans le flou car même si sur une page de contenu la hierachie des h me paraît évidente à respecter MAIS sur la page d'accueil il peut arriver, et c'est mon cas, que l'on présente sous forme de rubriques les différents contenus de ce site, ayant tous la même importance; et là mon coeur vascille entre les deux méthodes.

J'ai beau avoir codé la même page des deux façon... et rien ne me choque dans celle avec plusieurs h1 finalement!!

(désolé, je ne peux qu'en parler et pas montrer mon code, question d'éthique envers mon employeur)

Enfin... je n'ai pas appliqué à la lettre les recommandations et donc je n'ai pas tout passé en h1, ce qui me parait être une inepsie. Mais j'ai 7xh1, 9xh2 et 5xh3 dans et c'est vrai qu'il me paraît plus lisible et plus logique pour une lecture orientée utilisateur et non spider.

Commencerais-je à passer du côté obscur de la force !?

Mais c'est vrai qu'on peut retourner d'autres arguments dans le sens inverse donc... le dilème reste entier.

En tout cas grâce à vous j'ai découvert quasiment tous les mystères du H (sans mauvais jeu de mots ), mais il me reste un point à éclaircir:

L'utilisation de liens dans les balises titres !? est-ce bien correct ?

[aymericj]

Bonjour les gens,

Juste pour réjouter à la liste de ressources de Monique cette discussion qu'il y'a eu sur la mailing list accessiweb :

http://list.accessiweb.org/pipermail/acces...ne/subject.html

Les sujets concernés sont ceux ou l'on parle des balises <h>.

++

Aymeric

[Dudu]

Bonjour

Par contre je ne suis pas d'accord avec ta dernière proposition...

La sémantique ne serait-elle pas :

h1 est un titre de section, de niveau 1

h2 est un titre de sous-section, de niveau 2... soit une sous-section de h1

Ton exemple n'y colle pas vraiment, me semble-t-il

utiliser une balise hn uniquement pour la mise en forme et non pour le contexte ne me semble pas sémantique ! c'est comme si l'on coupait un paragraphe en plusieurs partie pour mettre du gras ou autre via css !

Je préfére l'avant dernière solution avec utilisation du span, d'ailleurs la définition du span "Cette balise sert à particulariser un sous-élément pour y appliquer une mise en forme spéciale." :-)

Mon message a suscité des remous, même en MP. Désolé de n'y répondre que tardivement, j'ai beaucoup de travail en retard..

Mon précédent message se concluait par une petite phrase passée inaperçue: "à voir, selon le reste du code".

J'avoue qu'elle n'était peut-être pas très claire. Je l'explicite:

Au choix, l'avant-dernier exemple ou le dernier exemple me semblent devoir s'appliquer. Mais pour choisir entre les deux, tout dépend du code et de comment la page est structurée sémantiquement.

Je vois beaucoup (trop ?) de sites utiliser un balisage qui ressemblerait à çà

<h1>Mon Site ! <span>Page n° 3, consacrée à l'immobilier</span></h1>

alors qu'idéalement il serait plus sémantique d'utiliser un <h1> suivi d'un <h2>.

Et vice versa, des sites avec un balisage HTML tel que

<h1>Mon site</h1><h2>qui est un super site</h2>

Là, le <span> imbriqué dans le <h1> serait plus judicieux.

Vu qu'on n'a pas ici d'URL à laquelle se fier (ce n'est pas un reproche), je me contente de donner 2 pistes. Parfois c'est la première qui devrait logiquement s'appliquer, parfois c'est l'autre.

Mais je le répète, je n'ai peut-être pas été assez clair, merci de me l'avoir fait remarquer

Car finalement qu'en est il de ce h1 unique ne faisant que répéter de manière appauvrie le title du document (si ce title est bien construit) et devant se résoudre le plus souvent à n'être que le support d'un logo et n'ouvrant rien qui ne soit déjà ouvert (par le title justement). Un simple p ou div feraient aussi bien l'affaire et nos documents n'en auraient que plus fière allure (sans rire, si on utilise l'extension "document map" de firefox c'est criant).

"+ 1" comme disent les djeunz

L'usage de la balise <h1> a été détournée par le référencement, çà on le sait. D'ailleurs mes derniers tests tendent à montrer que <h2> et <h3> ont désormais presque plus de valeur que <h1> aux yeux des moteurs. Mais là n'est pas le propos.

L'usage de la balise <h1> a aussi été détourné de manière plus globale: on voit cette balise comme le titre du document, et non comme le plus haut élément d'une hiérarchie sémantique. Pourquoi ? Parce que la balise <title> s'affiche certes dans l'interface du navigateur, mais pas dans le contenu même de la page (le "viewport" chez les anglophones).

Et pourtant c'est faisable, et je me demande dans quelle mesure on n'aurait pas à utiliser cette technique si l'on souhaite une sémantique la plus pure possible.

Les liens donnés par Monique sont très pertinents; je me permets toutefois d'y rajouter un excellent article de David Latapie: Afficher le titre (title) dans la page.

(et si vous souhaitez lire d'autres excellents articles, je vous conseille de dévorer l'intégralité de blog.empyree.org, ce site est un trésor de contenu )

Un des inconvénients de cette méthode est le non-support CSS de cette technique par un certain navigateur dont je tairais le nom

Un autre inconvénient est l'impossibilité d'un lien de type 'retour à l'accueil' sur la balise <title>, cf ci-dessous.

J'observe quand même que nulle part n'est évoquée l'absurdité qu'il y a, très concrètement, à réduire, le plus souvent, le plus haut niveau d'organisation du document à un simple logo et incidemment à un lien "retour page d'accueil". Cela pose je trouve beaucoup de questions sur cette modalité d'utilisation du h1 unique dont on ne peut même plus penser la pertinence.

Pas faux. Mais il est conventionnel (et ergonomique) d'apposer sur toutes les pages, a fortiori les pages internes évidemment, un lien pour revenir à la page d'accueil. D'ailleurs si ce lien n'existait pas, comment naviguer dans un site, alors même que le lien hypertexte est l'essence du web ?

Utiliser une pauvre balise <a href="/"> ? Je suis contre: çà appauvrit le contenu, et le texte d'ancre serait inutilement redondant avec le titre du document (ou une partie du titre), de la même manière que le <h1> en guise de titre de page est redondant avec le vrai titre de la page.

Là encore, on pourrait dire que c'est le rôle d'une balise telle que <link rel="start" src="/"> et ce serait vrai.

Mais là, si Explorer n'a pas implémenté non plus cette fonctionnalité, force est de constater qu'il n'est pas le seul pour une fois.

Et sur ce coup-là, j'adresse mon anathème à MozillaFoundation/MozCorp: cette fonctionnalité était dans Mozilla (la suite Mozilla), elle n'y est pas dans Firefox nativement: pourquoi ?

Oui je sais, une simple extension suffit à .. en attendant j'en ai marre d'installer 378 nouvelles extensions par jour.

Le seul navigateur à ma connaissance à avoir suivi les recommandations du w3c est Opera, qui intègre une barre de navigation tirant parti des "link rel". Peut-être Amaya aussi, je n'en suis pas sûr..

Utiliser une bidouille en CSS pour afficher les link rel ? Mouais..

My two cents..