Balise HTML <footer>
La balise <footer> définit le pied de page d'un site ou d'une section. Description, attributs et exemples.
La balise <footer> définit le pied de page d'une page web ou d'un élément <section>, <article> ou d'un autre élément de sectionnement. Un pied de page contient généralement des informations de copyright et d'auteur, des coordonnées, des liens de navigation, des documents connexes ou un lien « retour en haut ».
Cette page explique à quoi sert <footer>, comment il est associé à un repère d'accessibilité, pourquoi l'utiliser plutôt qu'une simple <div>, et comment placer des pieds de page au niveau de la page et au niveau de l'article sur une même page.
La balise <footer> est l'un des éléments sémantiques HTML5.
Un <footer> typique peut contenir :
- des informations de copyright, d'auteur et de contact
- des documents connexes
- un plan du site
- des liens « retour en haut »
Si le pied de page contient des coordonnées, encadrez-les dans la balise <address>.
Pourquoi utiliser <footer> plutôt qu'une <div> ?
Visuellement, <footer> et <div class="footer"> s'affichent de la même façon — ce sont tous deux des boîtes de niveau bloc sans style par défaut particulier. La différence réside dans le sens, et ce sens apporte de réels avantages :
- Accessibilité. Lorsque
<footer>est un enfant direct de<body>, les navigateurs l'exposent comme le repère ARIAcontentinfo. Les utilisateurs de lecteurs d'écran peuvent y accéder directement via un raccourci de repère, et les technologies d'assistance annoncent « informations sur le contenu » pour qu'ils sachent dans quelle région ils se trouvent. Une<div>ne transmet rien de tout cela. - SEO et lisibilité machine. Les moteurs de recherche et les outils de mode lecture utilisent les régions sémantiques pour comprendre la structure d'une page. Un
<footer>marque clairement des métadonnées supplémentaires au niveau de la page ou de la section. - Plan du document et maintenabilité. Les balises sémantiques rendent le balisage auto-descriptif, ce qui permet au prochain développeur (ou à vous-même, quelques mois plus tard) de lire la structure d'un coup d'œil.
Utilisez <footer> chaque fois que le contenu est véritablement du matériel de pied de page. Utilisez une <div> uniquement pour un regroupement générique sans signification.
Le repère contentinfo
Le rôle ARIA auquel un <footer> est associé dépend de l'endroit où il se trouve :
- Un
<footer>qui est un enfant direct de<body>devient le repèrecontentinfo— le pied de page de la page entière. Il ne doit y avoir qu'un seul tel pied de page au niveau de la page. - Un
<footer>imbriqué dans<article>,<section>,<aside>,<nav>ou<main>n'est pas un repère — il n'a pas de rôlecontentinfo. Il marque simplement le pied de page de ce contenu, et vous pouvez en avoir autant que vous avez de sections.
C'est pourquoi vous pouvez ajouter en toute sécurité un pied de page à chaque article d'une page sans perturber les technologies d'assistance : seul celui du niveau supérieur est le contentinfo de la page.
Syntaxe
La balise <footer> vient par paires. Le contenu est écrit entre les balises ouvrante (<footer>) et fermante (</footer>).
Exemple de <footer> au niveau de la page :
Le pied de page ci-dessous est un enfant direct de <body>, il agit donc comme le repère contentinfo de la page.
Balise HTML <footer>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Pieds de page dans <article> et un pied de page de page ensemble
Vous pouvez avoir plusieurs éléments <footer> sur une même page. Un schéma courant consiste à avoir un pied de page par <article> (pour l'auteur, la date ou les tags de cet article) plus un unique pied de page au niveau de la page en bas. Les pieds de page d'article ne sont pas des repères ; seul celui du niveau <body> est contentinfo.
<!DOCTYPE html>
<html>
<body>
<main>
<article>
<h2>First post</h2>
<p>Some article content...</p>
<footer>
<p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
</footer>
</article>
<article>
<h2>Second post</h2>
<p>More article content...</p>
<footer>
<p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
</footer>
</article>
</main>
<!-- Page-level footer: this one is the contentinfo landmark -->
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Voir aussi les éléments de sectionnement associés : <header>, <main>, <section> et <article>.
Restriction d'imbrication
Un <footer> ne peut pas contenir un autre <footer> ni un <header> comme descendant. Le balisage suivant est invalide :
<!-- Invalid: a footer nested inside a footer -->
<footer>
<p>Site footer</p>
<footer>
<p>This nested footer is not allowed.</p>
</footer>
</footer>Si vous avez besoin d'un pied de page pour une sous-section, donnez à cette section son propre élément de sectionnement (comme <article> ou <section>) et placez le pied de page à l'intérieur.
Attributs
La balise <footer> prend en charge les attributs globaux et les attributs d'événements.
Mise en forme du <footer>
<footer> n'a pas de styles par défaut particuliers — c'est simplement un élément de niveau bloc — donc vous le stylez comme n'importe quelle autre boîte. Un aspect courant est une barre sombre et centrée :
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}