Corsi on-line

Header e Footer semantici con HTML5

Prima di passare all’argomento centrale di questo post desidero sottolineare ancora una volta un aspetto di HTML5 che, almeno a giudicare dal tenore degli interventi di alcuni utenti su forum e gruppi di discussione, non sembrerebbe essere stato ancora metabolizzato: questa versione del markup per la creazione di pagine Web rappresenta un’evoluzione della 4.01 (le cui specifiche risalgono al 1999) ma non un suo sostituto; sarà possibile utilizzare HTML 4.01, così come XHTML, anche dopo che il W3c avrà reso definitiva e ufficiale l’attuale RC.

html5 logoOra che (si spera) abbiamo sgombrato il campo da un equivoco persistente, possiamo passare al discorso che sta alla base del presente articolo, cioè la natura semantica di HTML5, un’impostazione per la quale ad ogni componente si è cercato di associare un comportamento sulla base del relativo significato letterale (e viceversa); accade così che in HTML5 l’intera struttura di pagina acquisisca un impianto coerente dal punto di vista semantico.

Quanto detto può essere facilmente riassunto attraverso un semplice esempio; prima di HTML5 la definizione delle componenti di pagina per la delimitazione di header e footer poteva essere effettuata nel modo seguente:

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

Il limite in tale impostazione sta nel fatto che i div non hanno alcuna struttura semantica e l’associare ad essi degli identificatori descrittivi non contribuisce alla modifica di tale assunto; in HTML5 abbiamo invece una possibilità in più per introdurre header e footer:

<header> ... </header>
<footer> ... </footer>

In questo caso siamo di fronte ad una struttura semanticamente coerente; è però fondamentale tenere presente che tali elementi non costituiscono per loro natura l’header e il footer di una pagina Web, ma sono più propriamente dei riferimenti ai loro contenitori.

Post correlati
I più letti del mese
Tematiche