Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 9 di 51
  • livello principiante
Indice lezioni

Footer

Un tag per raggruppare informazioni sulle sezioni che compongono la pagina
Un tag per raggruppare informazioni sulle sezioni che compongono la pagina
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.

Tabella del supporto sui browser

Nuovi tag semantici e strutturali Internet Explorer Firefox Safari Google Chrome Opera
<footer> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Ti consigliamo anche