Qu'est-ce que la balise header ?
La balise HTML <header> définit l'en-tête d'une page ou d'une section, regroupant généralement le logo, la navigation et les éléments d'introduction.
Qu'est-ce que la balise <header> ?
La balise <header> est un élément sémantique HTML5 qui sert de conteneur pour le contenu introductif d'une page ou d'une section. Contrairement à une simple <div>, elle indique aux moteurs de recherche que les éléments qu'elle renferme constituent le "point d'entrée" de l'information qui suit.
On la retrouve le plus souvent tout en haut d'un site web (l'en-tête global), mais elle peut aussi être utilisée à l'intérieur d'un élément <article> pour contenir, par exemple, le titre de l'article, la date de publication et le nom de l'auteur.
Que contient typiquement une balise <header> ?
Dans le cadre d'un en-tête de site (Global Header), elle regroupe généralement :
- Le Logo de la marque.
- La Barre de navigation (souvent enveloppée dans une balise <nav>).
- Un moteur de recherche interne.
- Des éléments de "Call to Action" (boutons de connexion ou de contact).
Pourquoi est-elle importante pour le SEO et l'accessibilité ?
L'utilisation correcte du <header> est un signal fort pour la structure de votre document :
- Hiérarchisation du contenu : Elle aide Googlebot à identifier rapidement l'identité du site et les outils de navigation principaux avant de passer au contenu (<main>).
- Navigation assistée : Les lecteurs d'écran utilisent les balises <header> comme des points de repère (landmarks), permettant aux utilisateurs malvoyants de s'orienter plus facilement dans la page.
- Différence avec le <head> : Attention à ne pas confondre ! La balise <head> contient les métadonnées invisibles (titre SEO, scripts), tandis que le <header> contient ce qui est visible pour l'utilisateur.
Mise en place dans Webflow
Webflow propose plusieurs manières d'utiliser cette balise pour optimiser votre code :
- Pour votre barre de navigation : Si vous créez une section pour votre menu, allez dans le panneau Settings (touche D) et changez le tag div ou section en header.
- Pour vos titres de sections : Si vous avez une section complexe avec un sur-titre, un H2 et un paragraphe d'introduction, vous pouvez les envelopper dans un <header> à l'intérieur de cette section pour une sémantique parfaite.
⚠️ Attention : Ne placez jamais un <header> à l'intérieur d'un <footer> ou d'un autre <header>. C'est une erreur de structure qui pourrait perdre les algorithmes d'analyse.