<footer> : l'élément de pied de page
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <footer> représente un pied de page pour sa section de contenu ou racine de sectionnement la plus proche. Un <footer> contient généralement des informations sur l'auteur·ice de la section, des données de droit d'auteur ou des liens vers des documents associés.
Exemple interactif
<article>
<h1>Comment devenir magicien</h1>
<ol>
<li>Faites pousser une longue barbe majestueuse.</li>
<li>Portez un grand chapeau pointu.</li>
<li>Avez-vous mentionné la barbe ?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
footer {
display: flex;
justify-content: center;
padding: 5px;
background-color: #45a1ff;
color: white;
}
Attributs
Cet élément inclut les attributs universels.
Notes d'utilisation
- Les informations sur l'autrice ou l'auteur doivent être placées dans un élément
<address>et incluses dans l'élément<footer>. - Lorsque l'élément de sectionnement ou la racine de sectionnement ancêtre la plus proche est l'élément body, le footer s'applique à toute la page.
- L'élément
<footer>n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le plan.
Accessibilité
Avant la publication de Safari 13, le rôle de repère contentinfo n'était pas correctement exposé par VoiceOver (angl.). Si vous devez prendre en charge les anciens navigateurs Safari, ajoutez role="contentinfo" à l'élément footer pour vous assurer que le landmark sera correctement exposé.
Exemples
<body>
<h3>Les écrivains français du XIX<sup>ème</sup> siècle</h3>
<ul>
<li>Hugo</li>
<li>Flaubert</li>
<li>Zola</li>
<li>Maupassant</li>
</ul>
<footer>
<small>Copyright © 2023 Littérature.com. Tous droits réservés.</small>
</footer>
</body>
footer {
text-align: center;
padding: 5px;
background-color: #abbaba;
color: black;
}
Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu tangible. |
|---|---|
| Contenu autorisé |
Contenu de flux
sans élément descendant qui soit <footer> ou <header>.
|
| Omission de balises | Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires. |
| Parents autorisés |
Tout élément qui accepte du
contenu de flux. Un élément <footer> ne doit pas descendre d'un
élément <address>, <header>
ou d'un autre élément <footer>.
|
| Rôle ARIA implicite |
contentinfo ou
generic
si descendant d'un élément
article,
aside,
main,
nav ou
section ou
d'un élément avec le rôle
article,
complementary,
main,
navigation
ou
region
|
| Rôles ARIA autorisés |
group, presentation ou
none
|
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-footer-element |