Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<footer> : l'élément de pied de page ou de section
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 le pied de page de la section ou de la racine de sectionnement la plus proche. Un élément <footer> contient habituellement des informations sur l'autrice ou l'auteur de la section, les données relatives au droit d'auteur (copyright) ou les liens vers d'autres documents en relation.
Exemple interactif
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</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: #fff;
}
| 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
pas de rôle correspondant
si un descendant d'un élément
<article>,
<aside>, <main>,
<nav> ou
<section>, ou un élément avec
role=article ,
complementary,
main,
navigation
ou
region.
|
| Rôles ARIA autorisés |
group, none,
presentation
|
| Interface DOM |
HTMLElement
|
Attributs
Comme tous les éléments HTML, cet élément accepte les attributs universels.
Notes d'utilisation
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: #000;
}
Résultat
Accessibilité
Avant la publication de Safari 13, le rôle de repère contentinfo n'était pas correctement exposé par VoiceOver. 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é.
Spécifications
| Specification |
|---|
| HTML # the-footer-element |
Compatibilité des navigateurs
Chargement...