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
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émentHTML<footer> représente un pied de page pour sasection de contenu ouracine 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 lesattributs 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 leplan.
Accessibilité
Avant la publication de Safari 13, lerôle de repèrecontentinfo n'était pas correctement exposé parVoiceOver(angl.). Si vous devez prendre en charge les anciens navigateurs Safari, ajoutezrole="contentinfo" à l'élémentfooter 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 ducontenu 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 ougeneric si descendant d'un élémentarticle,aside,main,nav ousection ou d'un élément avec le rôlearticle,complementary,main,navigation ouregion |
| Rôles ARIA autorisés | group,presentation ounone |
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-footer-element |