Footer: cos'è, funzioni ed esempi sul tag html

Link copiato negli appunti

Funzioni e dati tecnici

L'elemento <footer> deve contenere in genere informazioni sulla sezione che lo contiene come:

i dati di chi ha scritto i contenuti;
collegamenti ai documenti correlati;
i dati di copyright;
e così via...

Riguardo il suo apporto semantico ad una pagina web sembra essere tutto chiaro, ma più complesso è il suo utilizzo a livello pratico:

Non necessariamente deve essere inserito solo alla fine di un documento.
Quando contiene intere sezioni, esse rappresentano: appendici, indici, note, accordi di licenza e altri contenuti del genere.
Non introduce una nuova sezione e quindi non è rilevante per l'outliner.
All'interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo stesso elemento.

<footer>
<small>©2011 Autore contenuto. Design by Designer sito </small>
</footer>

Riprendendo il nostro progetto guida, dopo aver definito definito il contenuto dell'<header>, possiamo vedere come il <footer> chiuda il blog distaccandosi dalle altre sezioni in modo molto naturale, racchiudendo al proprio interno una lista che aggiunge informazioni riguardo l'autore della pagina e la data del suo ultimo aggiornamento; infine il tag <small> ridefinito nella specifica dell'HTML 5 racchiude il copyright della pagina:

<footer>
<dl>
<dt>Creato da</dt>
<dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address></dd>
<dt>Ultimo aggiornamento</dt>
<dd><time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time></dd>
<dd>
</dl>
<small>Tutti i contenuti sono prottetti dalla licenza creative commons</small>
</footer>

Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta nel nostro progetto (figura 1):

Figura 10 - Struttura del documento: il footer principale
schema template html5 [footer]

Così come l'intero documento, ogni articolo del nostro blog avrà un <footer> contenente il nome dell'autore ed altre eventuali informazioni aggiuntive:

<section>
<h1>L'ultimo post</h1>
<article>
<header>
[...]
</header>
<p>
[...]
</p>
<footer>
<dl>
<dt>autore:</dt>
<dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address></dd>
<dt>categoria: </dt>
<dd><a href="categoria/multimedia">multimedia</a>,</dd>
<dt>tags: </dt>
<dd><a href="tags/video">video</a>,</dd>
<dd><a href="tags/canvas">canvas</a>,</dd>
<dt>permalink: </dt>
<dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd>
<dt>rank:</dt>
<dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></dd>
</dl>
</footer>
</article>
</section>

È da notare la scelta di inserire le informazioni riguardanti l’autore dell’articolo all’interno del tag <dl>; infatti nella specifica HTML5 questo elemento viene ridefinito come contenitore di metadati e quindi semanticamente corretto all’interno del nostro <footer>.

Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente, tutte le informazioni contenute nel <footer> per comodità abbiamo deciso di chiamarle metadati:

Figura 11 – Struttura del documento: footer degli articoli

schema template html5 [footer]

L’elemento <footer> potrebbe essere inserito anche all’inizio di un documento subito dopo il <body> oppure all’apertura di un tag <article> ma in questi casi non dovrebbe contenere elementi introduttivi riguardo il contenuto della sezione che lo contiene; il suo uso in questa posizione potrebbe essere dovuto solamente a ragioni pratiche come ad esempio la duplicazione del <footer> in fondo alla pagina quando i contenuti della stessa sono molto lunghi:

<body>
<footer>
<a href="#indice">Torna all'indice</a>
</footer>
<section>
[Contenuti molto lunghi...]
<section>
<section>
[Contenuti molto lunghi...]
<section>
<section>
[Contenuti molto lunghi...]
<section>
<footer>
<a href="#indice">Torna all'indice</a>
</footer>
</body>

Nella prossima lezione parleremo del tag <section> e della sua importanza nel sezionare la pagina in blocchi semanticamente distinti.