Définition technique
Éléments sémantiques HTML5 : <header> pour l’en-tête de la page ou d’une section (logo, navigation principale, bannière), <footer> pour le pied de page (liens légaux, contact, copyright). Plusieurs <header> et <footer> sont autorisés s’ils correspondent à des sections distinctes (ex. header d’article, footer de formulaire). Ils délimitent le « chrome » du site par rapport au contenu principal (<main>) et aident les moteurs et les technologies d’assistance à identifier les zones de navigation et de répétition. Un <header> de page contient en général le logo et la <nav> principale ; un <footer> contient les liens secondaires, mentions légales et parfois un formulaire de contact. Ces zones sont souvent exclues de l’analyse « contenu unique » par les moteurs.
Comment ça fonctionne ?
Les balises <header> et <footer> délimitent l'en-tête et le pied de page de la page ou d'une section. Plusieurs paires sont autorisées (ex. header/footer d'article). Les moteurs et les lecteurs d'écran utilisent ces repères pour distinguer le contenu principal du « chrome » du site.
L'erreur classique à éviter
Utiliser des div à la place par habitude, ou mettre du contenu éditorial unique dans le footer (Google déduplique le contenu répété). Un header ou footer purement décoratif sans sémantique rate l'opportunité d'améliorer l'accessibilité.
Impact business : pourquoi s'en soucier ?
Une structure header/footer claire améliore l’accessibilité et la compréhension du site par les moteurs (menus vs contenu unique). C’est une base du design sémantique ; son absence ou un usage purement décoratif (sans sens) affaiblit la qualité perçue du code et de l’expérience. Les utilisateurs de lecteurs d’écran peuvent naviguer par landmarks (header, main, footer). Une organisation cohérente sur tout le site renforce la crédibilité et facilite la maintenance.
La règle d'or
Reserver header pour logo, navigation principale, bannière ; footer pour liens légaux, contact, copyright. Garder le contenu unique dans <main>. Identifier les zones avec des landmarks pour une navigation claire.