Quelle est la différence entre header/footer et une simple div ?

Header et footer sont des repères sémantiques : ils indiquent la fonction de la zone (en-tête, pied de page). Les lecteurs d’écran et les moteurs les utilisent pour la navigation et la compréhension de la page. Une div n’a pas de sens sémantique. Utiliser header/footer améliore l’accessibilité et la structure du document sans changer l’apparence.

Peut-on mettre plusieurs header et footer sur une même page ?

Oui. Chaque ou peut avoir son propre header (ex. titre d’article, auteur) et footer (ex. date, liens). La page elle-même a en général un header global (logo, menu) et un footer global (liens légaux, contact). Plusieurs paires header/footer sont valides tant qu’elles correspondent à des blocs logiques distincts.

Le contenu du footer est-il pris en compte par Google pour le SEO ?

Oui, le footer est indexé. En revanche, le contenu répété sur toutes les pages (liens légaux, copyright) a un poids SEO limité car Google déduplique le contenu commun. Évitez de mettre tout votre contenu éditorial dans le footer ; réservez-le aux liens utiles, mentions légales et informations de contact.

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. Pour structurer un site proprement : Création de site internet.

Comment ça marche ?

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'Impact Business

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.

Bonnes pratiques vs Erreurs communes

✅ À faire : 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.
❌ À é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é.

Prompt IA

Contexte : site [vitrine / e-commerce], besoin [accessibilité WCAG / SEO]. Liste les éléments à placer dans <header> et <footer> (HTML et rôles ARIA si besoin). Donne un squelette HTML avec header, nav, main, footer. Indique ce qu’il ne faut pas mettre dans header/footer (contenu éditorial unique).