Elemento footer in HTML 5

La presente è la traduzione dell' articolo - The footer element - pubblicato originariamente su http://html5doctor.com/the-footer-element/. La traduzione viene riportata con il consenso dei curatori del sito.

Per molto tempo siamo stati, e lo siamo ancora, abituati a vedere un codice come il seguente:

<div id="footer">...</div>

nella parte inferiore delle pagine web ma, con l' HTML 5 sarebbe ora di "salutare" questo codice e dirgli addio. Con l' introduzione, in HTML 5, dell' elemento <footer>, si hanno più opportunità e flessibilità.

Specifiche tecniche

L' elemento footer rappresenta la parte inferiore della zona in cui è situato. Il footer, solitamente, contiene informazioni inerenti la sua sezione come, per esempio, chi ha scritto un articolo, collegamenti a documenti correlati, il copyright e simili.

Si parte

Prima che si parta con il dissezionare il nuovo elemento, cerchiamo di capire i concetti di base. Come è già  stato accennato in precedenza, la maggior parte delle persone avrebbe inteso il piè di pagina come segue:

<div id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
<div>

Tuttavia, con l' affacciarsi dell' HTML 5, non sarebbe più il caso di avere un codice simile. Come forse già si sa, non è più necessario l' elemento <div>. Nel nostro caso, quando ci si deve riferire al piè di pagina, il markup più appropriato dovrebbe essere <footer>.

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
</footer>

Come scritto nel primo paragrafo, in origine l' elemento <footer> veniva - ancora oggi -  utilizzato solo una volta nelle pagine web. Con l' ingresso di questo nuovo elemento in HTML 5, non deve essere più trattato a questa maniera. <footer> può essere inserito più volte per visualizzare tutte le informazioni supplementari.

Utilizzo dell' elemento <footer>

Una cosa importante da notare è che non si è limitati ad usare un solo elemento per pagina, bensì più elementi, anche nella stessa pagina, ed al di sotto dei relativi contenuti. Si potrebbe avere, quindi:

Sezione

<section>
   Section content appears here.
   <footer>
   Footer information for section.
   </footer>
</section>

Articolo

<article>
   Article content appears here.
   <footer>
   Footer information for article.
   </footer>
</article>

Per vedere un esempio con <footer> all'interno di un articolo / sezione, non si vada a cercare altrove ma si resti nella presente pagina. Scorrere verso la fine dell' articolo e si vedrà la parte in grigio chiaro, subito dopo il titolo "Approfondimenti". Il testo grigio nella sezione fornisce informazioni circa i riferimenti, le risposte, i tag e le categorie è infatti l' elemento oggetto del presente articolo.

[N. d. T. Fare riferimento, per quanto appena scritto, all' articolo originale in lingua inglese per vedere il <footer>].

Note

Sono andato inizialmente "fuori tema" in fase di presentazione per quanto concerne il nome dell' elemento in oggetto; l'uso che ne è stato fatto non è in fondo alla pagina o in fondo al presente articolo, ma pare possa andare bene ugualmente - informazioni sulle sezioni contenenti il nome dell' autore, collegamenti a commenti e simili-  Non c'è motivo per cui non si possa avere più di un footer in una stessa pagina. Le specifiche dicono: " Il footer non deve stare necessariamente al termine della sezione, come solitamente si fa".

Bruce Lawson – http://www.brucelawson.co.uk/2009/marking-up-a-blog-with-html-5-part-2/

Conclusioni

L' elemento footer offre la possibilità di definire le pagine web dando loro il corretto markup e la semantica, come deve effettivamente essere. E' essenziale usare questi nuovi tag allo scopo per il quale sono nati, così come ci si è abituati all' uso scorretto con le tabelle e con i div. 

Approfondimenti

http://www.w3.org/TR/html5/semantics.html#the-footer-element