Et vous ? Comment utilisez vous vos balise <hx> ?

Bonjour à tous.

Je cherche à recueillir vos avis et vos manières d'utiliser les balises <h1> à <h6> dans vos pages.

Je suis ce qu'on pourrais qualifier un novice dans le Web, les standards et l'accessibilité
J'ai réalisé quelques sites statiques simples, tous en XHTML + CSS .

Remarque hors sujet aux défenseurs des standards de la première heure...

Vous êtes vous déjà dit qu'il arrivera un jour ou les nouveaux concepteurs de sites n'auront jamais réalisé un seul site en utilisant des tableaux et pour qui les standards ne seront pas une alternative. Vivement ce Jour !.

Je reprends le fil de mon questionnement:

Avec mes quelques sites d'ancienneté dans le "profession", je me suis rendu compte que je prenais certainement des habitudes , des bonnes comme des mauvaises.

Je fais la plupart du temps pour le header une image avec un flou dégradé à droite ou a gauche, je l'aligne en conséquence et bien evidemment je finis avec un background de la meme couleur.
J'aprécie , pour le contenu que j'ai a mettre en tout cas, un site, dont le conteneur fait xx% de la largeur du body et ou la largeur est donc adaptable a chaque fenetre ( d'ou l'image en dégradé).

Par la dessus , je mets, dans un fichier php , contenant tous les éléments du header, les trois balises suivantes:

<h1> le titre du site <h1>
<h2>Une accroche ou un slogan<h2>
<h3>le nom de la page courante <h3> 

Alors graphiquement , en terme de rendu , c'est sur qu'on s'en fout pas mal , ca fait trois lignes définies par une balise <hx> , et l'utilisateur conventionnel s'en satisfait très bien.

Mais moi , a force de parcourir les excellents sites sur les standards et l'accessibilité , forcement ca commence a m'interpeller quelque part

Il faut absolument utiliser un balisage qui sémantiquement veut dire quelque chose !

Mon <h1> n'est ni plus ni moins que ce qu'il y a dans la balise <title> ...
Mon <h2> ne correspond pas a un titre de deuxième niveau puisque c'est un slogan
Mon <h3> lui est plus approprié car c'est effectivement un titre mais le niveau 3 lui n'est pas logique.

Je suis alors tenté, pour l'internaute moyen ( MSIE handicap 0 ) de mettre ces éléments directement dans mon image , ce qui me donne plus de flexibilité pour les polices notamment, indiquer le contenu de ce que je mets aujourdhui dans mon <H1> et mon <H2> dans la balise <alt>, a destination notamment des navigateurs non graphiques.

Le contenu du <h3> devient le <h1> et la c'est logique.

Voila pour mon idée ( ya pas de quoi faire une thèse mais je pense que pour chaque interrogation de ce type , il faut faire cette démarche si l'on veut s'astreindre a travailler proprement).

J'aimerais savoir a l'aide de quelles balises ou quelles approches vous gerez vos entêtes de sites.

Comment codez vous sémantiquement et proprement les titres de pages , les slogans , les titres de sites et eme les sous partie de sites ?

De plus à l'aide quelle balise codez vous un lien vers le concepteur du site , ( site réalisé par ...) pour indiquer facilement à l'internaute ayant un handicap quelqconque que c'est ca que ce lien la montre.

le

 <div id=conception>.....</div>

me plait moyen...

j'attends vos suggestions , vos commentaires....

Bonne fin de journée à toutes et tous.

Bonsoir,
Je ne suis pas un expert en la matière, mais je dirais que le h1 reprenant le nom du site est presque indispensable tant que les navigateurs n'afficheront pas le contenu de <title> dans la page elle-même. Ce qu'un lecteur d'écran lit au contraire déjà très bien depuis longtemps, soit dit en passant.

De là, ton h3 indiquant la page courante passerait en h2, car ton slogan n'est effectivement pas un titre, et à ce titre (OK je sors pour le jeu de mots douteux), ne mérite pas de balisage h2.

Donc en résumé :
h1 => nom du site
h2 => titre de la page en cours
h3 => sous-titres de la page en cours

Je partage ton opinion mais il reste le cas du slogan à régler..

Comment indiquer qu'un slogan est un slogan et surtout qu'il soit percu et interprété comme tel par un lecteur d'écran ?

j'avoue être vraiement perplexe sur ce point la précisement

Mets-le en évidence d'une autre manière, mais pas avec un titre.
Mais je pense qu'en plaçant le slogan juste en-dessous du titre du site dans un simple <p> devrait faire l'affaire. ET rien ne t'empêche d'avoir toutes les fantaisies que tu veux avec les CSS.

Bonsoir,

Problématique illusoire, à vrai dire.

les titres <hn> ont été définis en termes de "ressource Web", ou de page unique, si vous préférez. Ils n'ont aucun rapport, sémantiquement, avec les titres de sites et autres slogans. La notion de site n'existe pas, sémantiquement, en (X)HTML...

En l'absence de quoi que ce soit de normatif, de standard ou même d'éthique (sic) en la matière, chacun fera ce qu'il lui plait, plait, plait
Modifié par Laurent Denis (17 Jan 2006 - 20:51)

Donc finalement , sémantiquement , mon imbrication <h1> a <h3> du départ n'est pas foncièrement incorrecte......meme sil elle ne me satisfait pas pleinement !

Tu peux imbriquer tes titres comme tu veux, ce ne sera jamais incorrect. Par contre, il est effectivement recommandé de suivre une hiérarchie logique de titrage.

Bonjour,

a écrit :
Donc finalement , sémantiquement , mon imbrication <h1> a <h3> du départ n'est pas foncièrement incorrecte......meme sil elle ne me satisfait pas pleinement !

Si elle est incorrecte pour le slogan, ce qui ce rapproche de ton autre remarque :

a écrit :
Comment indiquer qu'un slogan est un slogan et surtout qu'il soit percu et interprété comme tel par un lecteur d'écran

Pourquoi aurait-tu besoin qu'un slogan soit interprété en tant que slogan par les lecteurs d'écrans ?

Si tu veux établir une relation logo/titre de site - slogan, de manière formelle, tu peux les associer dans la balise h1 par exemple ou de tout autre manière si c'est sufisemment clair :

<h1>Le dalai lama</h1>
<p>L'ami de vos poireaux vinaigrette</p>

Sera tout aussi efficace, personne ne doutera qu'il s'agit du slogan.

Au contraire, en utilisant un titre h2, tu élimine la relation logo/titre - Slogan, sauf si ton slogan est également un titre structurant ton contenu, ce qui peut arriver.

Pour le reste, je suis comme Laurent : Il n'y à aucune règle ou théorie pour établir une hiérarchie de titre, la seule règle est que ce soit pertinent et utile et que la hiérarchie des titres soit respectée et apporte du sens à la structure.

a écrit :
De plus à l'aide quelle balise codez vous un lien vers le concepteur du site , ( site réalisé par ...)

De la manière la plus triviale avec un lien : site réalisé par..., ou en utilisant la balise title du lien pour donner cette précision.

La solution de donner un id="conception" à un div ou à quoi que ce soit d'autre n'à aucune valeur en html/xhtml qui ne sont pas des langages supportant les concepts du web sémantique.

a écrit :
Tu peux imbriquer tes titres comme tu veux, ce ne sera jamais incorrect. Par contre, il est effectivement recommandé de suivre une hiérarchie logique de titrage.

@ quentin : La hiérarchie des titres (ce n'est pas une imbrication) est très formelle et doit suivre obligatoirement l'indexation de leur niveau (1, 2 , 3...)
Ce qui signifie par exemple que tu ne peux pas débuter avec un titre h2 sans avoir au préalable définis un titre h1.

Jean-pierre
Modifié par jpv (17 Jan 2006 - 21:45)

ok, ca m'eclaircit bien vos commentaires ......
ca parait très logique finalement.

Merci !

Jpv > Ah, je suis désolé, je me suis mal exprimé sur le terme d'imbrication. Alors là comme tu l'as compris, forcément... ce n'est pas de l'imbrication du tout.

Pour la question du slogan, moi je verrais bien quelque chose comme ça :

<h1>Framasoft<br />
<span>Les aventures d'un peuple migrateur</span></h1>

Et voilà. Après un petit h1 span {mes propriétés CSS} si on veut donner un style graphique distinct au slogan, et tout va bien.
Le titre spécifique à la page devient alors le <h2>...

Mais j'ai une question :
Peut-on utiliser plusieurs <h1> dans une même page ? On pourrait imaginer que chaque page du site soit séparée entre contenu général du site (nom et slogan, liens de navigations, mentions légales, etc.) et contenu spécifique de la page. Du coup, on pourrait avoir un <h1> pour le nom du site (et, par exemple, des h2 pour le nom de chaque rubrique suivi d'un sous-menu...), et également un <h1> pour le titre du contenu spécifique à la page.
Qu'en pensez-vous ?

EDIT: j'ai fait le test, et en tout cas ça valide... De plus ça me semble répondre à une certaine logique : ne pas considérer une page comme un simple "document", mais plutôt (quand le contenu s'y prête) comme un document inséré dans une interface (de navigation, principalement).
Modifié par mpop (18 Jan 2006 - 01:02)

Bonsoir,

a écrit :
Peut-on utiliser plusieurs <h1> dans une même page ?

Oui, tu es tout à fait libre de le faire, rien ne s'y oppose.

a écrit :
Du coup, on pourrait avoir un <h1> pour le nom du site ... et également un <h1> pour le titre du contenu spécifique à la page

Non, parce que tu es tout à fait libre d'utiliser plusieurs h1 par page...

Plus sérieusement, comme l'explique Laurent, la hiérarchie de titre h est exclusivement consacrée au contenu de la page et à rien d'autre.

Laurent Denis a écrit :
Bonsoir,
les titres <hn> ont été définis en termes de "ressource Web", ou de page unique, si vous préférez.
...
La notion de site n'existe pas, sémantiquement, en (X)HTML...

Ce qui défini un site comme une simple collection de documents uniques non ordonnée.

Dans cette perspective le nom d'un site est un simple élément d'identification commun adossé à un graphe de liaison de proche en proche (la carte du site) duquel on ne peut pas tirer grand chose du point de vue sémantique.

En revanche qi on veut simluler une hiérarchie ayant comme point de départ le nom du site, celui-ci doit être absolument unique, donc on ne peut pas le mélanger au niveau suivant de la hiérarchie du titre de la page, comme dans ton exemple.

Une bonne solution, si c'est possible, est de l'implémenter dans une balise h1 sous la forme nom du site - titre de la page.

On le considère alors comme ce qu'il est, autrement dit pas grand chose par rapport à la structure de la page et un simple élément d'identification qu'on se contente de rappeller.

a écrit :
On pourrait imaginer que chaque page du site soit séparée entre contenu général du site (nom et slogan, liens de navigations, mentions légales, etc.)

Rien n'empêche d'adopter ce genre d'architecture dans une hiérarchie de titre usuelle.

Par ailleurs, on dispose d'éléments spécifiques à cet usage : ce sont les liens relatifs link rel, malheureusement ce dispositif ne semble pas pris au sérieux par les navigateurs qui ne l'implémentent pas à de rares exception (mozilla mais pas firefox, opéra...).

C'est terriblement dommage et l'abandon du support de ces types de liens relatifs par firefox à définitivement enterré ce dispositif qui semblait pourtant très prometteur.

Je n'en connais pas la raison, mais peut-être que Laurent, le dalai lama de la specification pourrait nous en dire plus à ce sujet.

Jean-pierre
Modifié par jpv (18 Jan 2006 - 06:18)

Jpv > l'utilisation de titres du type <h1>Nom du site : Titre de page</h1> (peu importe le caractères de séparation) ne mélange pas en fait deux titres distincts ? d'où le <h1>Titre du site</h1><h2>Titre de page</h2> qu'on voit beaucoup plus souvent ?
Je ne sais pas si je me fais bien comprendre...

Bonjour,

Concernant les link (formidable outil), leur "abandon" par Firefox ne répond à aucune raison normative. C'est simplement une conséquence de la politique de marketing de Mozilla : il fallait simplifier l'interface pour faire à peu de choses près un clone d'IE.

Pour bénéficier des link dans FF, il faut donc en passer par une extension...
Modifié par Laurent Denis (18 Jan 2006 - 08:17)

Bonjour,

a écrit :
l'utilisation de titres du type <h1>Nom du site : Titre de page</h1> (peu importe le caractères de séparation) ne mélange pas en fait deux titres distincts ? d'où le <h1>Titre du site</h1><h2>Titre de page</h2> qu'on voit beaucoup plus souvent ?

Oui... et Non

Oui parce qu'on mélange effectivement deux éléments distincts.

Non parce que le nom du site n'à aucun rôle à jouer par rapport à la structure de la page qui est le sujet de la hiérarchie hn.

Cette méthode "nom du site - titre de la page" permet de résoudre par ailleurs un autre cas qui est le niveau hiérarchique à accorder aux éléments communs comme le menu de navigation et les aides.

Je m'explique :

On à souvent des profils de site de cette nature :

Nom du site
  aide (liens d'évitements, formulaire de recherche)
  menu de navigation
  contenu
  pied de page

La première question c'est où mettre le titre de la page dans cette structure ?
Selon la réponse on va se retrouver avec une hiérarchie un peut bancale qui va tendre à ceci :

 h1 Nom du site
     h2 aide (liens d'évitements, formulaire de recherche)
     h2 menu de navigation
     h2 titre de la page
         contenu
    h2 pied de page

La première remarque est qu'il faut "attendre" pour connaire le titre de la page ce qui n'est pas "logique".
La seconde remarque c'est que les grandes structures aide, menu, pied de page doivent logiquement être d'un niveau inférieur au titre de la page ett devrait se retrouver en h3, mais pour ça il faut "remonter" le titre de la page juste après le titre.

Ce qui devrait nous donner :

 h1 Nom du site
     h2 titre de la page
          h3 aide (liens d'évitements, formulaire de recherche)
          h3 menu de navigation
           contenu
          h3 pied de page

Mais là on se retrouve avec un nouveau problème "philosophique" : les grandes structures de la page se retrouvent à un niveau très inférieur à leur rôle et par ailleurs on ne peut titrer le contenu qu'en commençant à h4 ce qui laisse peut de lattitude et créer une profondeur qui ne correspond pas non plus à son rôle.

En revanche, si on mélange le nom du site avec le titre dans le h1, on obtiens une hiérarchie plus "logique" où les grandes structures de la page se retrouvent en h2 et la hiérarchie de titre du contenu peut débuter en h3, ce qui est conforme à son rôle (titre de la page, grandes structures, contenu)

 h1 Nom du site - titre de la page
      h2 aide (liens d'évitements, formulaire de recherche)
      h2 menu de navigation
          contenu
     h2 pied de page

Ce qui me parait plus cohérent...

Ceci étant, ce n'est pas toujours possible ou pertinent.

Quant au "mélange" nom du site - titre de la page, si il est vrai que c'est discutable, cela fait gagner deux niveaux de titre, simplifie la hiérarchie et la rends plus cohérente...

Par ailleurs, l'implémentation du nom du site étant purement informative, cela ne me parait pas peser sur la cohérence de la structure, au contraire, on évite ainsi de créer un premier niveau artificiel.

Jean-pierre
Modifié par jpv (18 Jan 2006 - 15:03)

Bouh... Que vous êtes compliqués. Qui a dit qu'un nom de de site devait être exploité pour référencer un document dans Google ? Parce que c'est ça, finalement, votre question

Au point que le Web est rendu nous devrions avoir des <h1> et <h1.1> Non mais sans blague ce que dit Laurent est très vrai.. Pourquoi introduire le nom du site ce que pour le référencement ou alors il nous faudrais d'autre nouvelle balise dans le xhtml2.0 ou meme le xhtml9.2

think about that!

Bonjour tous,

@ Jpv: Ta proposition de mettre le titre du site + le titre de la page au sein de la même balise <h1> avec un <span> éventuellement pour jouer sur l'apparence me convient tout à fait.
Je pense qu'effectivement , c'est pénible de démarrer le contenu par <h4> qui est un niveau de titre devant amener logiquement déjà des éléments de détails.

@ Laurent et bensti2 : Je ne pense pas que ceci ai quoi que ce soit à voir avec le référencement dans Google, à vrai dire, je n'y avait même pas pensé.
Bon nombre de sites sur le web ont une structure de contenu très semblable, présentant effectivement un menu decrivant les différents contenus du site, pouvant apparaitre en une ou plusieurs parties, une entete, des mentions legales, de l'aide , etc.....

L'utilisation sémantique des balises <Hn> permet certes d'en faire ce que l'on veut du moment que l'on respecte la logique définie par les standards ( ne pas avoir un <h2> sans <h1> avant , etc.......)

Néanmoins , en examinant ça de plus près, ces balises sont des balises de titres qui "semblent" plus appropriés à une utilisation littéraire de type:

I / la vie des animaux à fourrure
A/Le cas du castor glouton
a) Avoir une queue plate : inconvénient ou avantage ?
- oui
-Non
b) Brosser ses dents pour conserver une bonne qualité de coupe d'arbre 

B/ La loutre insomniaque

C'est vrai que le XHTML 2 ou quel que soit le numéro de version pourrait prévoir l'utilisation de balise décrivant la page pour ne conserver que les balises <hn> pour le contenu.

Une suggestion même, que je fais à ceux qui oeuvrent au sein du W3C:

Pourquoi ne page diviser la balise <title> du <head> en deux balises distinctes de style <site> et <page> dans lequel on pourrait introduire une notion d'affichage à l'écran pour les navigateurs conventionnels ou non.
La forme et mise en page serait toujours gérée par le CSS
Ca nous donnerait en gros

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

	<Site class="titresiteweb" visibility="visible">Rose Grenouille - Créateur d'inoubliable</title>
<page class="titrepage" visibility="hidden">Construire des sites web respectueux des standards</page>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta  http-equiv="keywords"content=""/>
	<meta http-equiv="description" content="Acceuil du site Rosegrenouille.com" />
	<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection" />
	<link rel="shortcut icon" href="favicon.ico" />

</head>

      

Bien sur ce code n'existe pas et ne constitue qu'une proposition.
Le nom du site et de la page apparaisent en tout temps pour les lecteurs d'écran et au choix pour le rendu visuel.

Je pense qu'on serait vraiment mieux avec un <h1> correspondant au titre de premier niveau du contenu de la page . Ca me parait plus logique....

Non ?

@RoseGrenouille

C'est vrai qu'il devrait mettre quelque chose pour ca mais le web du départ étais du text et sans entete de design il ne faut pas l'oublier... Pour conclure pour moi les <hx> sont des éléments pour structurer le contenu de mon site et non pour la présentation dans le header.

Rose grenouille > ce qui serait beaucoup plus logique, c'est ce que je disais dans mon premier message : afficher le contenu de l'élément title directement dans la page.

Jean-Pierre > un truc me chiffonne quand même dans ta structure :

h1 nom de site et titre de page
H2 Liens d'évitement et form de recherche
h2 Menu
Contenu

Un truc très appréciable des lecteurs d'écran est qu'on peut se déplacer aisément de titre en titre.
Le problème avec cette structure-là, c'est qu'il n'y a pas de titre qui enchaîne directement avec le contenu, on est obligé de se taper le menu à chaque fois. Soit il faudrait alors commencer le contenu par un h2 introduction / sommaire ou quelque chose de similaire, ce qui ne convient pas pour tous les contenus...

ET les liens d'évitement ne sont pas une solution, en tout cas pas sur IE avec Jaws, ce dernier ne commence pas la lecture au bon endroit lorsqu'on ouvre un lien doté d'une ancre.

Je veux dire qu'avec :

h1 Nom du site
h2 Aide, form de recherche
h2 Menu
h2 Titre de la page

On peut se positionner sur le h2 titre de la page et immédiatement démarrer la lecture avec le contenu utile.