Les nouvelles balises introduites par HTML5 ne sont pas très évidentes à utiliser. Plus que jamais, le contenu est roi et tout dépend de lui. Les notions de Sectioning Content implicites ou explicites risquent de se transformer en poil à gratter pour les intégrateurs web. Pour commencer, notre balise div préférée devra laisser du terrain à la balise section quand on pourra justifier d’un h1 à l’intérieur.
Ce titre de premier niveau mène la danse et pourra inspirer l’intitulé de l’id de la section. Plus que jamais, l’intégrateur web devra avoir une solide culture générale. Il lui faudra tout au moins s’intéresser suffisamment aux contenus qu’il met en page pour savoir où commencent et où finissent les idées de ses clients !
Durant mes tests, j’ai beaucoup hésité sur l’utilisation de la balise header. Celle que l’on pensait forcément prévue pour prendre la place de notre div id="header" ne s’est pas vu attribuée ce rôle de manière formelle et univoque dans les spécifications. Elle pourra servir dans plusieurs contextes en conjonction (ou pas) avec une balise footer ; mais pas le footer que l’on place généralement tout en bas de la page page… Dans les faits, l’utilisation des balises header et footer est à géométrie variable.
Modèles de document HTML5
HTML5 introduit la notion de Sectioning Content. Pour faire simple, une section regroupe un ensemble de titres de plusieurs niveaux formant une unité logico-sémantique. Lorsqu’un deuxième h1 est nécessaire, c’est qu’on se trouve dans une autre «section». Les sections sont implicites et suivent la hiérarchie des balises h1, h2, etc. mais on peut les formaliser avec les balises article, aside, nav ou… section.
La première remarque qui m’est venue à l’esprit en voyant la liste des balises ayant le statut de «section», c’est qu’il manquait les balises header et footer !
Les éléments HTML se retrouvent dans zéro ou plusieurs catégories en fonction de leurs caractéristiques.
Le modèle de document HTML5 se compose de : metadata content, flow content, sectioning content, heading content, phrasing content, embedded content et interactive content. (Source : W3C)
Pourquoi les balises header et footer n’en font pas partie ?
Très bonne question. La premier élément de réponse tient certainement à la nature équivoque de ces balises : elles peuvent se trouver à l’intérieur des sections introduites par body, article, nav, aside ou section pour regrouper le titre (ou les titres avec hgroup) et des informations complémentaires sur le contenu (date, auteur, etc.).
La deuxième, c’est peut-être pour les utiliser afin de regrouper des informations dans l’en-tête et le pied de page du site, sans les couper des autres informations. De cette manière, les informations contenues dans header et footer concernent toute la page (voire tout le site web), ce qui est plus logique.
Reste le Sectioning implicite. Est-ce à dire qu’il faut éviter d’utiliser des niveaux de titre dans notre en-tête et notre pied de page ?
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
[...] This post was mentioned on Twitter by Jean-Marie Gall, bb (css4design), br1o les bons tuyaux, OUPS productions, Antoine Guédès and others. Antoine Guédès said: #HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections» http://bit.ly/d9gHsa (via @br1o) [...]
Les nouvelles balises de structure introduites en HTML5 sont effectivement moins évidentes qu’il y paraît de prime abord, comme je le remarquais et décortiquais ici.
Il semble que oui.
Pour ce que j’en ai compris, le rôle des nouvelles balises header et footer est assez clair. Mais leurs noms, du moins leur traduction, prête à confusion. Il me semble particulièrement inapproprié de traduire « footer » par « pied de page » car le footer ne se trouve pas nécessairement en bas et est relatif à la section davantage qu’à la page dans laquelle plusieurs footer peuvent être présents. J’aimerais trouver mieux, car l’appellation « pied de page » induit beaucoup trop en erreur…
[...] notes rapides prises lors de ma lecture des spécifications HTML5. Aujourd’hui, c’est le commentaire de Romy qui me donne l’occasion de rebondir sur le découpage d’une page web avec [...]
Salut Romy, comme tu peux le voir dans le ping ci-dessus, ton commentaire m’a inspiré :)
Il faudrait sans doute reformuler « elles peuvent se trouver après chaque section » en « elles peuvent se trouver après chaque début de section », non ?
Pour ce qui est de la traduction de « footer », que dites-vous de « pied de section », pour éviter « pied de page » ?
@Hoizey: le footer peut très bien être utilisé en début, en haut, d’une section, d’un article, de la page…
Sinon, j’ai encore du mal avec le concept de section et la hierarchie des titres : j’ai beaucoup de réticence à mettre plusieurs h1 dans une même page :-/
Il peut être placé visuellement en haut, à gauche, à droite, mais son idée, c’est bien la « fin » de la section dans laquelle il est, non ?
Concernant les h1, j’ai aussi l’habitude de n’en mettre qu’un par page, voire même un seul h2 si le h1 reprend le nom du site. J’ai peur qu’on se mette avec HTML5 à créer des tonnes de sections imbriquées avec dans chacune un unique h1, ce qui ne serait sans doute pas mieux… ;-)
Justement non, pas pour ce que j’en ai compris. Le footer contiendra le nom de l’auteur, les droits de reproduction, etc. Ça peut être suffisamment important pour être précisé en premier, tout au début, ou quasi, immédiatement sous le titre par exemple, comme sur ce cette page (qui n’est pas encore en HTML5) : Soupe de carottes et lentilles au curry
Idem, même si logiquement plusieurs éléments peuvent se trouver à un même niveau d’importance. C’est d’ailleurs le cas dans les blogs où les titres des articles sont en H1 (comme sur css4design ;))
Oui et non : sur ce blog, seuls les titres des billets ont un h1 car de fait ils sont au même niveau d’importance ;) Et je n’ai pas mis de h1 pour le logo ou la baseline du blog. Mais à part le doctype, css 4 design n’est pas vraiment en html5.
@Nicolas Hoizey — oui merci, la phase n’était pas très explicite. Je l’ai changé par :
Belle tentative avec « Pied de section ». Pas sûr quand même qu’on ôte toute ambiguïté avec la balise ;)
Peut-être « fin » plutôt que « pied »…
avez vous eu un retour positif en ref avec cette methode , google prend t’il en compte ces nouvelles dispositions du html ?
sujet tres interressant , je pensais que le html5 n’etait pas encore diffuse mais juste a l’etat de projet bien avance ! bravo et merci pour vos articles .
Le HTML5 n’arrive t-il pas un peu tard compte tenu du développement de Flash et Silverlight ??? La version 5 reste du HTML donc une vieille techno peu adaptée a la création de sites innovants…