Docs HTML exécutables : Balise footer

Q: Comment écrire le symbole copyright en HTML ?

Utilisez l'entité ©, qui affiche ©. Vous pouvez aussi taper le caractère directement quand la page utilise . Entourer la ligne de la marque comme mention en petits caractères.

Q: Une page peut-elle avoir plusieurs footer ?

Oui. Chaque ou peut avoir son propre footer pour l'auteur ou les tags. Seul un footer qui n'est pas dans article, aside, main, nav ou section est le repère contentinfo de la page pour les lecteurs d'écran.

Comment faire un footer en HTML

Placez le contenu de fin de votre page dans un élément <footer>, généralement le dernier élément de <body>. Comme <header>, il n'a pas d'apparence par défaut ; c'est le CSS qui en fait une barre de pied de page :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© affiche le symbole ©. <small> marque la ligne de copyright comme mention en petits caractères, ce qui est son sens en HTML, pas seulement une police plus petite. Les listes de liens sont de vraies listes <ul>, donc la plupart des lecteurs d'écran annoncent combien de liens contient chaque colonne.

Sur une page avec peu de contenu, le footer se place juste sous ce contenu, avec de l'espace vide en dessous. La solution est une colonne flex : le conteneur est au moins aussi haut que la fenêtre, et la zone principale prend toute la hauteur restante. La boîte grise ci-dessous représente une fenêtre de navigateur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Retirez flex: 1 de main et le footer remonte sous le paragraphe. Sur une vraie page, mettez les mêmes règles sur <body> avec min-height: 100vh (et margin: 0) au lieu d'une hauteur fixe, pour que le footer soit en bas des pages courtes et après le contenu sur les pages longues.

Des footer dans les articles

Un <footer> conclut l'article ou la section la plus proche, donc un article de blog ou un commentaire peut avoir le sien, avec l'auteur, la date ou les tags :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Les lecteurs d'écran ne traitent que le footer de la page comme repère contentinfo. Un footer dans un article est un groupe ordinaire, il ne fait donc pas concurrence au pied de page du site.

Les coordonnées avec address

Pour les coordonnées de la page ou de son propriétaire, utilisez <address> dans le footer. Il ne sert qu'aux coordonnées (pas à n'importe quelle adresse postale de votre contenu), et les navigateurs l'affichent en italique par défaut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

Le retour à la ligne dans l'adresse est l'un des bons usages de <br>. Pour en savoir plus sur les liens e-mail, voir la page lien mailto.

Un footer peut contenir des liens, des listes, des formulaires (une inscription à la newsletter), des images et un <nav>. Il ne peut pas contenir de <header>, un autre <footer> ni un <main>. Un second menu dans le footer peut être un <nav> avec un label qui le distingue du menu principal :

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Erreurs fréquentes

Placer <footer> hors de <body>. Tout ce qui est visible va dans <body>, footer compris.
Utiliser position: fixed pour le garder en bas. Un footer fixe recouvre le contenu sur les petits écrans et demande du padding partout. Utilisez le schéma de la colonne flex.
Utiliser <address> pour n'importe quelle adresse. Il sert aux coordonnées de l'auteur de la page ou de l'article. L'adresse d'une boutique dans une liste de magasins est un simple <p>.
Des colonnes de liens construites avec des balises <br>. Utilisez des listes <ul> pour que la structure soit annoncée.
Écrire l'année en dur. Mettez à jour l'année du copyright dans votre template, ou générez-la depuis votre serveur ou votre étape de build.

Questions fréquentes

Qu'est-ce que la balise footer en HTML ?

<footer> est un élément sémantique pour le contenu de fin d'une page ou d'une section : copyright, coordonnées, liens associés ou informations sur l'auteur. C'est une boîte bloc sans style par défaut.

Que mettre dans le pied de page d'un site ?

Un pied de page typique contient la mention de copyright, des liens vers les pages légales comme la confidentialité et les conditions, les coordonnées, les liens vers les réseaux sociaux et un court plan du site. Gardez aussi la navigation principale dans un <nav> en haut, car tous les visiteurs ne défilent pas jusqu'à la fin.

Comment garder le footer en bas de la page ?

Faites du body une colonne flex au moins aussi haute que la fenêtre (display: flex; flex-direction: column; min-height: 100vh;) et donnez à <main> flex: 1. La zone principale grandit alors pour remplir l'espace vide et pousse le footer vers le bas sur les pages courtes.

Comment écrire le symbole copyright en HTML ?

Utilisez l'entité ©, qui affiche ©. Vous pouvez aussi taper le caractère directement quand la page utilise <meta charset="utf-8">. Entourer la ligne de <small> la marque comme mention en petits caractères.

Une page peut-elle avoir plusieurs footer ?

Oui. Chaque <article> ou <section> peut avoir son propre footer pour l'auteur ou les tags. Seul un footer qui n'est pas dans article, aside, main, nav ou section est le repère contentinfo de la page pour les lecteurs d'écran.

Concepts liés