Footer

7 marzo 2011

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>

Footer: esempi concreti

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+

Tutte le lezioni

1 ... 8 9 10 ... 51

Se vuoi aggiornamenti su Footer inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Footer

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy