Corsi on-line

Utilizzo corretto dell’elemento footer in HTML5

Prima di disporre dei nuovi elementi introdotti da HTML5 era (e a tutti gli effetti è ancora) possibile utilizzare costrutti come div id="header" e div id="footer" per indicare l’area dedicata alle intestazioni (testata o header) e il piè di pagina di un layout (footer); fin qui nessun problema dal punto di vista del design, ma nella realtà anche nulla che permetta al browser di identificare realmente un header o un footer all’interno delle pagine.

html5Con HTML5 questa mancanza è stata colmata grazie all’introduzione di alcuni elementi semantici, per cui footer potrà essere riconosciuto per quello che è a livello di client, un’area destinata ad ospitare informazioni (ad esempio i riferimenti ad un copyright) riguardanti una determinata sezione; detto questo è però necessario concentrare l’attenzione ciò che non è l’elemento footer.

Per evitare possibili fraintendimenti, è bene specificare che footer non rappresenta e non introduce una nuova sezione di contenuti, inoltre, esso non costituisce necessariamente un piè di pagina. Queste particolarità rendono molto più flessibile l’utilizzo di tale elemento: non introducendo una sezione addizionale footer potrà essere utilizzato a corredo di contenuti specifici; non rappresentando necessariamente un piè di pagina potrà essere impiegato più di una volta.

Vediamo ora un semplice esempio di adozione di footer in associazione a section, altro elemento fortemente “semantico” di HTML5:

<section>
   Blah! Blah! Blah!
   <footer>
   Informazioni a corredo del contenuto.
   </footer>
</section>

Stesso discorso per quanto riguarda l’elemento article:

<article>
   Blah! Blah! Blah!
   <footer>
   Informazioni a corredo del contenuto.
   </footer>
</article>

Chiaramente, non vi sarà alcun impedimento nell’utilizzo di footer come piè di pagina, per cui potremmo impiegare:

<footer>
  <ul>
     <li>Copyright: Blah! Blah!</li>
     <li>Contatti: Blah! Blah! Blah!</li>
  </ul>
</footer>

invece di:

<div id="footer">
  <ul>
     <li>Copyright: Blah! Blah!</li>
     <li>Contatti: Blah! Blah! Blah!</li>
  </ul>
</div>

Quindi, si tenga presente che, esattamente come è vero che non esiste alcuna regola che obblighi all’utilizzo di più footer in una sola pagina, una pagina potrà anche avere tanti footer quante sezioni contiene. Da notare come nella descrizione riportata sul manuale del W3C si parli di “a footer section in a document” ingenerando forse confusione sulla vera natura di questo elemento.

Post correlati
I più letti del mese
Tematiche