Qu’est-ce que En-tête et pied de page (header, footer) ?

C'est comme le porche d'entrée et le sous-sol d'un immeuble : l'un oriente, l'autre regroupe l'utile répétitif sans encombrer l'appartement. É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.

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.

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. Les parcours clavier avec repères header/main/footer permettent de sauter des blocs entiers ; sur sites longs, les audits accessibilité rapportent souvent 30 % à 50 % de temps de navigation en moins pour les utilisateurs de lecteurs d'écran une fois les landmarks correctement posés.

• 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.

• 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é.