Nous avons remarqué ces derniers temps que les professionnels du Web sont de plus en plus intéressés par le HTML5. Plusieurs d’entre eux ont d’ailleurs commencé à l’utiliser. La spécification HTML5[en] contient plusieurs nouvelles balises. Nous allons couvrir dans ce billet l’une de ces balises : le <header>
, quand l’utiliser, quand ne pas l’utiliser et quels sont ses pré-requis. Êtes-vous prêts ? Plongeons dans cette aventure dès maintenant !
Nous sommes habitués de voir ceci
<div id="header">
ou encore en français
<div id="entete">
à l’intérieur du code source de plusieurs sites sur lesquels nous naviguons. Avec le HTML5, cette syntaxe n’est plus nécessaire. Nous pouvons en même temps ajouter un peu de valeur sémantique à la structure du document en utilisant la balise <header>
Mais qu’est-ce que cette balise représente ?
Selon la spécification HTML5, l’élément header représente :
Un groupe d’aide de navigation ou d’introduction. Un élément header contient de façon générale les headings (les éléments h1 à h6 ou l’élément hgroup). Il peut aussi contenir d’autres éléments, comme une table des matières, un formulaire de recherche, ou des logos.
(Note : le paragraphe précédent est une traduction libre de la spécification, référez-vous à la spécification elle-même pour le texte original).
Il est important de noter que l’élément header ne spécifie pas le début d’une nouvelle section du document, mais qu’il est l’en-tête d’une section. Cette balise ne doit pas être confondue avec la balise head
.
À quel endroit doit-on utiliser la balise <header>
?
L’endroit le plus évident est au début d’une page. Nous pouvons commencer par y inclure le titre le plus important sur votre page.
<header>
<h1>Le titre le plus important de la page</h1>
</header>
Il est important de noter que vous pouvez avoir plus d’une balise header par page. Vous pouvez utiliser une balise header par section de le page. Par exemple :
<header>
<h1>Le titre le plus important de la page</h1>
</header>
<article>
<header>
<h1>Titre de cet article</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
Notez la présence de deux <h1>
à l’intérieur de ce bout de code HTML. Ceci est parfaitement valide en HTML5 (et d’ailleurs aussi en HTML 4), mais causera des problèmes en accessibilité. Vous devez être conscient de cette problématique, particulièrement si vous avez plusieurs articles sur une page. Nous couvrirons cette problématique plus en détail lors d’un prochain billet.
Ce qui est requis dans la balise header.
Nous savons maintenant que nous pouvons avoir plusieurs fois la balise header dans un document. Toutefois, est-ce qu’il existe d’autres requis pour que l’utilisation de cette balise soit valide ?
En fait, une balise <header>
contient en général au moins (mais il n’y a pas de restrictions) une balise de titre (heading) (<h1>
à <h6>
). Vous pouvez aussi y inclure la balise <hgroup>
. Nous allons discuter de cette balise dans un autre billet. (En lire plus sur la balise <hgroup>
dans la spécification HTML 5 [en]). L’élément peut aussi contenir d’autres éléments à l’intérieur du flux du document comme une table des matières, des logos ou un formulaire de recherche. Nous pouvons aussi y inclure de la navigation avec l’élément <nav>
.
Ajouter du style à <header>
Un dernier point important : pour que la plupart des navigateurs effectuent le rendu de cet élément comme étant un élément de type niveau block (block level element), vous devez le spécifier à l’intérieur d’une règle CSS.
header { display:block;}
En fait, vous aurez à faire ceci pour la plupart des nouveaux éléments de type block en HTML. Les nouvelles versions des navigateurs devraient supporter nativement ces éléments bientôt. En attendant, suivez ce qui a été implémenté dans les moteurs de rendu sur ce wiki[en].
En conclusion
La balise header nous donne la possibilité de structurer nos documents avec une meilleure sémantique pour les en-têtes de sections ou de pages.
Pour approfondir :
- Lien vers l’article original en anglais
- La spécification HTML 5 – l’élément header (en anglais)
- Les nouveaux éléments dans HTML 5 (en français chez alsacréations)
Note de la traduction : J’utilise de façon interchangeable les mots balise et élément dans le texte. Dans le contexte du billet, ils vont signifier la même chose. Si je voulais être plus puriste, je dirais que l’élément est la représentation mémoire dans le DOM, et que la balise est la représentation textuelle dans le html (avec les < >).
4 commentaires pour “ La balise header ”
Commentaire par docteurhtml5 le
Simplement un petit test pour vérifier que tout va bien.
Commentaire par id meneo le
Tout ne va pas bien, la mise en page ne passe pas du tout. Navigateur FF4 sous PC.
Commentaire par docteurhtml5 le
Merci, ça devrait être réglé maintenant.
Commentaire par caillier le
Juste un « petit » problème, quand j’ai ajouté les balises « header » une grande partie du site s’est désorganisé, des photos ont changé d’emplacement, la cadrage a été modifié…..bref j’ai dû ôté les dites balises,
Avez-vous une solution pour que tout reste stable malgré l’ajout des ces balises qui me semblent pourtant très intéressantes
merci d’avance
bien cordialement