HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»

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 ?