Guida HTML interattiva: Footer

Q: Come scrivo il simbolo del copyright in HTML?

Usa l'entità ©, che mostra ©. Puoi anche digitare direttamente il carattere quando la pagina usa . Racchiudere la riga in la segna come testo in piccolo.

Q: Una pagina può avere più di un footer?

Sì. Ogni o può avere il suo footer per i dati dell'autore o i tag. Solo un footer che non si trova dentro article, aside, main, nav o section è il landmark contentinfo della pagina per i lettori di schermo.

Metti il contenuto di chiusura della pagina in un elemento <footer>, di solito l'ultima cosa dentro <body>. Come <header>, non ha un aspetto predefinito; è il CSS a trasformarlo in una barra di piè di pagina:

<!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>

© mostra il simbolo ©. <small> segna la riga del copyright come testo in piccolo, che in HTML è il suo significato, non solo un font più piccolo. Gli elenchi di link sono vere liste <ul>, quindi la maggior parte dei lettori di schermo annuncia quanti link ha ogni colonna.

In una pagina con poco contenuto, il footer sta subito sotto quel contenuto, con spazio vuoto sotto. La soluzione è una colonna flex: il contenitore è alto almeno quanto la finestra e l'area principale prende tutta l'altezza rimasta. Il riquadro grigio qui sotto fa le veci di una finestra del browser:

<!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>

Togli flex: 1 da main e il footer salta su sotto il paragrafo. In una pagina vera, metti le stesse regole su <body> con min-height: 100vh (e margin: 0) invece di un'altezza fissa, così il footer sta in fondo alle pagine corte e dopo il contenuto in quelle lunghe.

Un <footer> chiude l'articolo o la sezione più vicini, quindi un post di un blog o un commento può averne uno suo, con autore, data o tag:

<!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>

I lettori di schermo considerano landmark contentinfo solo il footer a livello di pagina. Un footer dentro un articolo è un gruppo normale, quindi non fa concorrenza al footer del sito.

Contatti con address

Per le informazioni di contatto sulla pagina o sul suo proprietario, usa <address> dentro il footer. Serve solo per i contatti (non per qualsiasi indirizzo postale nei tuoi contenuti), e i browser lo mostrano in corsivo di default:

<!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>

L'a capo dentro l'indirizzo è uno degli usi corretti di <br>. Per saperne di più sui link email, vedi la pagina su mailto.

Un footer può contenere link, liste, form (un'iscrizione alla newsletter), immagini e un <nav>. Non può contenere un <header>, un altro <footer> o un <main>. Un secondo menu nel footer può essere un <nav> con un'etichetta che lo distingue da quello principale:

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

Errori comuni

Mettere <footer> fuori da <body>. Tutto ciò che è visibile va dentro <body>, footer compreso.
Usare position: fixed per tenerlo in basso. Un footer fisso copre il contenuto sugli schermi piccoli e richiede padding ovunque. Usa lo schema con la colonna flex.
Usare <address> per qualsiasi indirizzo. Serve per i contatti dell'autore della pagina o dell'articolo. L'indirizzo di un negozio in un elenco di sedi è un semplice <p>.
Colonne di link costruite con tag <br>. Usa liste <ul> così la struttura viene annunciata.
Scrivere a mano l'anno scorso. Aggiorna l'anno del copyright nel tuo template, o stampalo dal server o dalla build.

Domande frequenti

Cos'è il tag footer in HTML?

<footer> è un elemento semantico per il contenuto di chiusura di una pagina o di una sezione: copyright, contatti, link correlati o informazioni sull'autore. È un riquadro a blocco senza stile predefinito.

Cosa mettere nel footer di un sito?

I footer tipici contengono l'avviso di copyright, i link alle pagine legali come privacy e termini, i contatti, i link ai social e una breve mappa del sito. Tieni comunque la navigazione principale in un <nav> in alto, perché non tutti i visitatori scorrono fino alla fine.

Come tengo il footer in fondo alla pagina?

Trasforma il body in una colonna flex alta almeno quanto la finestra (display: flex; flex-direction: column; min-height: 100vh;) e dai a <main> flex: 1. L'area principale cresce allora fino a riempire lo spazio vuoto e spinge in basso il footer nelle pagine corte.

Come scrivo il simbolo del copyright in HTML?

Usa l'entità ©, che mostra ©. Puoi anche digitare direttamente il carattere quando la pagina usa <meta charset="utf-8">. Racchiudere la riga in <small> la segna come testo in piccolo.

Una pagina può avere più di un footer?

Sì. Ogni <article> o <section> può avere il suo footer per i dati dell'autore o i tag. Solo un footer che non si trova dentro article, aside, main, nav o section è il landmark contentinfo della pagina per i lettori di schermo.

Concetti correlati