Page 40 - Guida tascabile HTML5

Spesso nella pagina è necessario prevedere un’area (solitamente posta in coda a

tutti gli altri contenuti) che raccoglie informazioni di servizio come dettagli sul
copyright, rimandi alla privacy policy, indirizzi di contatto o altro. Quello che

sulla carta stampata prende il nome di “piè di pagina”, nella struttura semantica è

identificato con il tag <footer>.
Questo tag può essere utilizzato per fare riferimento alla chiusura dell’intera

pagina (che anche graficamente viene spesso caratterizzata in modo differente dal

contenuto principale) oppure alla chiusura di una sezione della stessa (per esempio
in coda a ogni articolo di un archivio).

NOTA Anche nel caso del tag <footer> è consigliabile, quando appropriato, esplicitare
il ruolo semantico dell’elemento utilizzando la sintassi <footer role="contentinfo">. In
questo modo si evitano ambiguità o interpretazioni non uniformi nei diversi browser o
screen reader, fornendo un punto di riferimento certo all’interno della struttura della
pagina.

TERMINOLOGIA Nidificato nel tag <footer> può trovare spazio il tag <address>, per
racchiudere le informazioni di contatto. È necessario precisare che quando tale tag
viene utilizzato nel footer principale della pagina, le informazioni di contatto sono
legate in generale al sito, mentre quando il tag si trova nidificato in un singolo articolo,
il contatto può essere riferito all’autore di tale contenuto.Ricordate che il tag <address> è
riservato agli estremi di contatto, e non deve essere utilizzato per marcare un qualsiasi
indirizzo presente all’interno del documento.

Ecco un esempio di tag <footer> semplice e completo, in cui vengono incluse

informazioni sul copyright della pagina e sugli estremi di contatto della redazione:

<footer>
<p>Copyright © 2017 Apogeo – Idee editoriali Feltrinelli srl</p>
<address>
Via Andegari 6 - 20121 Milano<br>
Email: libri@apogeonline.com
</address>
</footer>

Il contenuto principale

Per completare la panoramica dei tag che permettono di strutturare in modo
articolato (e corretto dal punto di vista semantico) il contenuto dei documenti

HTML rimangono da analizzare quelli dedicati al contenuto principale della

pagina.
Negli esempi fin qui illustrati abbiamo già incontrato il tag <main>, che come

illustrato all’inizio del capitolo nella Figura 3.2 ha proprio il ruolo di differenziare

il contenuto primario da tutto ciò che lo circonda e completa il documento.