fastclemmy.com

A juste titre

# 11-08-2004

Parmi les commentaires laissés suite au redesign de fastclemmy.com (outre les coups de Baygon ;-), Sam (ai-je déjà signalé que j'étais fan de son nouveau design ?) a pointé les incohérences flagrantes du balisage des titres de mon site.

L'occasion rêvée pour moi de réfléchir sur la structure des documents et le balisage des titres avec les balises <hX>. Amusant d'ailleurs, car le sujet a agité la blogosphère anglophone il y a à peine plus d'un mois (lire , , , , et ).

Remarque préliminaire : la réflexion qui suit se base uniquement sur le balisage de ce weblog, d'autres pistes sont bien sûr envisageables pour d'autres types de sites.

La balise <h1>

Commençons donc par le début : <h1>. Il est de coutume de mettre le titre du site web dans cette balise, Zeldman, Denis, la plupart des utilisateurs de Dotclear le font. Logique ? Peut-être, mais il est sûr en tout cas que ceci fait doublon avec la balise <title>, ce qui m'inciterait plutôt à éviter cette habitude. Que mettre d'autre dans ce <h1> dans ce cas ? Du contenu utile évidemment, en l'occurrence pour ce weblog les titres des différents logs.

De plus, cette méthode permettrait de résoudre le cas de conscience qu'ont certaines personnes à utiliser plusieurs fois la balise <h1>. Au passage, rien ne dit dans les spécifications d'HTML qu'il est interdit d'utiliser plusieurs fois cette balise.

Interaction avec la structure

Un autre élément de réflexion qui m'est apparu en abordant ce sujet de la structuration des documents est l'interaction avec le reste du site. Le langage HTML a été conçu au départ pour baliser des documents scientifiques, pas réellement des sites web comme on les conçoit maintenant. Dans cette perspective, faut-il baliser les éléments de navigation avec des éléments de titrage de type <hX> ? Le risque de parasitage du contenu me conduit à penser qu'il vaudrait mieux l'éviter.

En conclusion, je pense partir sur une structure très simple au final : <h1> pour les titres de logs, <h2> pour les sous-titres à l'intérieur des logs. Le reste étant des éléments de navigation ils ne méritent pas de balisage spécifique. Et vous, qu'en pensez-vous ?

#xhtmlCSS

Vos commentaires

Igrecpoint - site -
Ben, comme toi, je pense que le h1 doit-être le titre principale de la page (je pens eque doubler l'attribut améliore le référencement).
Sur la home, le nom du blog par exemple, mais après selon les pages: le titre du billet sur un billet ...
On a le droit de mettre plusieurs par page ? C'est pas logique, si ?

Olivier B - site -
Mon avis :
Pour moi le H1 est le premier niveau de titre d'un document du type :
1. blah blah
1.1 blah bidule blah
1.2 truc titre
2. rholala
2.1 ...
(ça rend pas beau aligné à droite ça :*)

Bref, h1 = "niveau de titre 1" à la manière des styles de Word. h1 ce n'est pas le titre global du document mais son premier titre dans son arborescence.
Donc aucun problème pour réutiliser h1 plusieurs fois par page.

Maintenant c'est vrai que (et c'est pareil dans word) je trouve qu'il manque une balise pour le titre du document. TITLE en html c'est joli, mais ça ne s'affiche pas (il faut que je vérifie si il y a une possibilité d'appliquer un css à la balise title qui permettrait de la faire apparaitre).

Sémantiquement, l'idéal serait d'avoir un le titre de mon site
associé à un css qui permettrait l'affichage du logo de son site par ex.
Mais on aboutirait vite a
le titre de mon site
et là côté moteurs de recherche, indexation, affichage dans les barres de titres des navigateurs, ... je ne crois pas que ça fasse bon ménage.

Du coup on fait quoi en attendant ?
ben un div id="header" ou qqch du genre dans lequel on met son logo et puis on utilise h1 pour ses titres de blogs...

Olivier B - site -
oulala, la moitié de mes explications ont sauté, j'avais pourtant pas mis de > ni de < dedans.
Je recommence :
Sémantiquement, l'idéal serait d'avoir un
TITLE le titre de mon site /TITLE
associé à un css qui permettrait l'affichage du logo de son site par ex.
Mais on aboutirait vite a
TITLE A HREF="" le titre de mon site /A /TITLE
et là côté moteurs de recherche, indexation, affichage dans les barres de titres des navigateurs, ... je ne crois pas que ça fasse bon ménage.

fastclemmy - site -
Désolé pour les balises qui sautent, j'ai mis un strip_tags qui supprime sans pitié le moindre bout d'HTML... Si vous voulez écrire des balises, il faut les encoder avec &lt; < et &gt; >

Denis - site -
J'avoue, je positionne systématiquement mon logo dans un h1 sur toutes mes pages, mais si c'était à refaire, je ne le ferais pas. D'ailleurs, dès que je trouve le temps de recoder mon site, je n'emploirai plus cette technique. Je suis d'avis que le H1 est important (bien sûr) et si celui-ci répète le contenu du title, ça ne me gène pas trop pour l'instant (j'y réfléchis encore toutefois). Par contre, ce qui est clair, c'est que ma prochaine stratégie, ce sera de mettre le logo dans un h1 sur le homepage et par la suite, de mettre dans mon h1 des pages de contenu (un seul par page bien entendu) le véritable titre de la page, qui figurerait actuellement dans un h2.

S.F. - site -
Pourquoi ne pas passer bêtement les commentaires au fil de htmlspecialchars() ?

Bobe -
Peut être pour éviter de transformer les esperluettes des éventuels caractères (plus ou moins exotiques) transformés en entités html et envoyés par le navigateur.

S.F. - site -
http://www.psydk.org/ar_2004-01#n59 pourrait alors t'intéresser, mais je crains que tu ne doives envoyer un email à psydk parce que son fichier d'exemple/source bugge un peu ;)

Igrecpoint - site -
Mais c'est pas bien du tout ca de mettre une balise image dans une balise h ... c'est pas fait pour ... c'est plus beaucoup propre de mettre ton image via le css sur ton h1 dans ce cas la, non ?

gizmo -
Personnellement, je ne met qu'une balise H1 par page, qui contient du texte et est généralement masqué par une image via CSS.
Pourquoi un seul H? N'est-ce pas redondant avec la balise title? Je ne pense pas.
En fait, je vois internet comme un immense bibliothèque et chaque site y est un livre. Comme chacun le sait, un livre a un titre et est généralement dévisé en chapittre. Ainsi, je considère que TITLE est le titre de mon livre et ne change quasiement jamais d'un page à l'autre de mon site (ou alors, je considère que j'ai un recueil de nouvelles ;) ) et la balise H1 me sert de titre pour mes chapitres.

gizmo -
Personnellement, je ne met qu'une balise H1 par page, qui contient du texte et est généralement masqué par une image via CSS.
Pourquoi un seul H? N'est-ce pas redondant avec la balise title? Je ne pense pas.
En fait, je vois internet comme un immense bibliothèque et chaque site y est un livre. Comme chacun le sait, un livre a un titre et est généralement dévisé en chapittre. Ainsi, je considère que TITLE est le titre de mon livre et ne change quasiement jamais d'un page à l'autre de mon site (ou alors, je considère que j'ai un recueil de nouvelles ;) ) et la balise H1 me sert de titre pour mes chapitres.

Denis - site -
Igrecpoint > Pourquoi ce serait pas bien de mettre l'image directement dans le H1 ? Il n'y a aucune contre indications à cet effet. Si l'image mise dans le h1 est significative, elle compte alors pour du contenu et du fait, se doit s'être dans le fichier HTML et non dans l;a feuille de style. Qui plus est, tout ce que j'ai lu sur le FIR (parce que c'est ce dont tu parles) va à l'effet que la technique n'est pas aussi accessible que l'on serait porté à le croire. À mon sens, toutes images significatives se doit de résider dans le fichier HTML. Il n'y a que les images à nature cosmétique pou décorative qui devraient être refoulées à la CSS"

Laurent Denis - site -
Igrecpoint, Denis : et si on cherchait des alternatives à la FIR ? Il y en a au moins 2 ;)

http://blog-and-blues.org/weblog/2004/08/15/274

Igrecpoint - site -
euh, c'est quoi le FIR ?
Sinon, je pense que c'est pas bien pour des raisons d'accessibilité. c'est tristant je crois qui s'est retrouvé a surfé en imod sur son blog et quasiement tout passais pil poil (http://standblog.org/blog/2004/03/02/93113363-courrier-des-lecteurs-aujourdhui-jai-teste-i-mode) ... apres, faut voir si les styles autre que ecran existe sur la page ou pas ...
je suis pas très clair ...
mais sinon : http://www.htmlhelp.com/reference/html40/block/h1.html
(c'est peut etre ça votre FIR).

Mais ce que je voulais dire c'est que mettre des images dans les h ca nuit a la navigation crue ...

Laurent Denis -
Igrecpoint, un titre en image ne nuit ni à la navigation ou à l'accessibilité que si l'attribut alt de l'image n'est pas correctement employé. Je vois mal le rapport avec i-mode ?

Ce sont en revanche les solutions appelées FIR (Fahrner Image Replacement) mettant l'image en background CSS et utilisant un display:none ou un visibility:hidden... qui posent des problèmes d'accessibilité dans les lecteurs d'écran. Tout comme le display:none sur le titre de ton site...

Géry F. - site -
Perso, ca me semble intéressant de mettre dans la balise TITLE un titre discriminatif par page. Ca permet quand on consulte l'historique de son navigateur, quand on voit le titre en resultat d'un moteur de recherche de voir de quoi parle la page. Alors on pourrait dans la balise title faire précéder le titre de la page par le titre du site, mais ca risque de faire long, d'ou ma préférence pour garder dans un h1 sur chaque page le titre du site.

Laurent Denis -
Géry : mettre le titre de la page dans , avec celui du site, permet d'identifier précisément la ressource en question. Mais Quelle importance peut bien avoir la longueur ?

En revanche, pour faciliter le repérage dans les onglets de navigateurs, plutôt "titre de page" - "titre de site" que l'inverse...

Dernière chose : le fait que le ait un contenu identique à un , par exemple avec le titre de page dans les deux cas... n'a rien de gênant, ni d'inavlide, ni d'insatisfaisant ! Ces deux éléments ne sont pas du tout destinés au même usage...

Laurent Denis -
Zut ! Je recommence :
Géry : mettre le titre de la page dans les **title**, avec celui du site, permet d'identifier précisément la ressource en question. Mais quelle importance peut bien avoir la longueur ?

[...]

Dernière chose : le fait que le **title** ait un contenu identique à un **h1**, par exemple avec le titre de page dans les deux cas... n'a rien de gênant, ni d'invalide, ni d'insatisfaisant ! Ces deux éléments ne sont pas du tout destinés au même usage..

Géry F. -
Laurent Denis:
Pour la longueur du title, ce que je trouve génant c'est que si on affiche dans son navigateur la barre latéral avec les favoris ou l'historique, on aura plus que des titles tronqués, et si on met le titre du site avant celui de la page on ne verra plus ce dernier.

Laurent Denis -
Pour le troncage, il se produit la même chose dans les onglets. C'est pourquoi il me semble préférable :
- de mettre le titre de page avant le titre de site.
- d'utiliser un favicon qui permet l'identification immédiate du site dans les favoris, les onglets, etc.

Igrecpoint - site -
ok,
pour le FIR, c'est clair depuis que j'ai lu : http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image

merci en tout cas, pour le reste de l'explication, top les gars !!
merci !

Anubis - site -
> je crains que tu ne doives envoyer un email à
> psydk parce que son fichier d'exemple/source
> bugge un peu ;)

Je crains qu'il y ait des incompréhensions puisque cette page marche parfaitement à cette heure (tardive) et fait exactement ce qu'elle décrit faire.

Peutch - site -
H1, c'est le header le plus important, donc en toute logique c'est le titre de votre page ! Est-il redondant avec la balise TITLE ? Je ne le pense pas, car la balise Title n'est pas destinée à être affichée, alors qu'H1 l'est ! H1 est donc destinée à afficher le titre de la page.

Pourquoi ne pas utiliser un div header pour ça, me direz-vous ? Et bien parce qu'un tel div ne s'appuie que sur du CSS pour ressortir ... Hors certains navigateurs ne supportent pas le CSS. Dans les recommandations du W3C, il est d'ailleurs bien expliqué qu'il ne faut pas s'appuyer sur le css pour la compréhension du document !
Par exemple, si vous utilisez l'extension WebDeveloper pour le navigateur Firefox, vous pouvez désactiver le CSS. Il faut que la page reste néanmoins lisible ! Mais ici, quand on désactive le CSS, on ne voit plus le titre de la page !

Il faut donc mettre le titre de la page dans H1, afin que tous les navigateurs, qu'ils supportent ou non le CSS, l'affichent en gros.

Mon conseil donc : h1 pour le titre "public" de la page et h2 pour vos titres de billet.

Mephis - site -
La balise TITLE comme son nom l'indique sert de titre à la page toute entière. Les balises HX ne sont que des titres de section. Il me parait donc logique que l'on puisse utiliser au sein d'une même page autant de H1, H2, et que l'on veut.

Il s'agit de définir une arborescence, un sommaire au sein d'une page.

TITLE => Les animaux
-H1 => Les félins
--H2 => Le lion
--H2 => Le chat
-H1 => Les poissons
--H2 => La carpe
--H2 => Le brochet
Etc

sara -
vous étes nuls . j'ai rien trouve pour ma recherche

Ajouter votre commentaire