Tag HTML <footer>
Il tag <footer> definisce il footer di un sito web o di una sezione. Descrizione, attributi ed esempi.
Il tag <footer> definisce il footer di una pagina web o di un elemento <section>, <article>, o di un altro elemento di sezionamento. Un footer contiene solitamente informazioni sul copyright e sull'autore, dettagli di contatto, link di navigazione, documenti correlati o un link "torna su".
Questa pagina spiega a cosa serve <footer>, come si associa a un landmark di accessibilità, perché è preferibile rispetto a un semplice <div>, e come posizionare footer a livello di pagina e footer a livello di articolo nella stessa pagina.
Il tag <footer> è uno degli elementi semantici HTML5.
Un tipico <footer> può contenere:
- informazioni sul copyright, sull'autore e sui contatti
- documenti correlati
- una mappa del sito
- link "torna su"
Se il footer contiene i dettagli di contatto, racchiudili nel tag <address>.
Perché usare <footer> invece di un <div>?
Visivamente, <footer> e <div class="footer"> vengono renderizzati allo stesso modo — entrambi sono box a livello di blocco senza stili predefiniti oltre a quello. La differenza sta nel significato, e questo significato porta reali vantaggi:
- Accessibilità. Quando
<footer>è un figlio diretto di<body>, i browser lo espongono come landmark ARIAcontentinfo. Gli utenti di screen reader possono saltare direttamente ad esso tramite una scorciatoia per i landmark, e le tecnologie assistive annunciano "informazioni sul contenuto" in modo che sappiano in quale regione si trovano. Un<div>non trasmette nulla di tutto questo. - SEO e leggibilità automatica. I motori di ricerca e gli strumenti in modalità lettura usano le regioni semantiche per comprendere la struttura della pagina. Un
<footer>segna chiaramente i metadati supplementari a livello di pagina o di sezione. - Struttura del documento e manutenibilità. I tag semantici rendono il markup auto-descrittivo, così lo sviluppatore successivo (o tu stesso, mesi dopo) può leggere la struttura a colpo d'occhio.
Usa <footer> ogni volta che il contenuto è genuinamente materiale da footer. Usa un <div> solo per raggruppamenti generici privi di significato.
Il landmark contentinfo
Il ruolo ARIA a cui si associa un <footer> dipende da dove si trova:
- Un
<footer>che è figlio diretto di<body>diventa il landmarkcontentinfo— il footer dell'intera pagina. Dovrebbe esserci uno solo di questi footer a livello di pagina. - Un
<footer>annidato all'interno di<article>,<section>,<aside>,<nav>o<main>non è un landmark — non ha il ruolocontentinfo. Segna semplicemente il footer di quel contenuto, e se ne possono avere tanti quante sono le sezioni.
Per questo motivo è possibile aggiungere tranquillamente un footer a ogni articolo di una pagina senza confondere le tecnologie assistive: solo quello al livello superiore è il contentinfo della pagina.
Sintassi
Il tag <footer> viene in coppia. Il contenuto è scritto tra i tag di apertura (<footer>) e di chiusura (</footer>).
Esempio di <footer> a livello di pagina:
Il footer qui sotto è un figlio diretto di <body>, quindi funge da landmark contentinfo della pagina.
Tag HTML <footer>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Footer all'interno di <article> e footer di pagina insieme
È possibile avere più elementi <footer> in una stessa pagina. Un pattern comune prevede un footer per ogni <article> (per autore, data o tag di quell'articolo) più un singolo footer a livello di pagina in fondo. I footer degli articoli non sono landmark; solo quello a livello di <body> è contentinfo.
<!DOCTYPE html>
<html>
<body>
<main>
<article>
<h2>First post</h2>
<p>Some article content...</p>
<footer>
<p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
</footer>
</article>
<article>
<h2>Second post</h2>
<p>More article content...</p>
<footer>
<p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
</footer>
</article>
</main>
<!-- Page-level footer: this one is the contentinfo landmark -->
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Vedi anche gli elementi di sezionamento correlati: <header>, <main>, <section> e <article>.
Restrizione di annidamento
Un <footer> non può contenere un altro <footer> o un <header> come discendente. Il seguente markup è non valido:
<!-- Invalid: a footer nested inside a footer -->
<footer>
<p>Site footer</p>
<footer>
<p>This nested footer is not allowed.</p>
</footer>
</footer>Se hai bisogno di un footer per una sotto-sezione, assegna a quella sezione il proprio elemento di sezionamento (come <article> o <section>) e inserisci il footer al suo interno.
Attributi
Il tag <footer> supporta gli Attributi Globali e gli Attributi Evento.
Stilizzare il <footer>
<footer> non ha stili predefiniti speciali — è semplicemente un elemento a livello di blocco — quindi si stilizza come qualsiasi altro box. Un aspetto comune è una barra scura e centrata:
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}