Vediamo il nuovo modo di organizzare i contenuti con HTML5.
header
Definizione formale
L’elemento header rappresenta un gruppo di informazioni introduttive o di aiuto alla navigazione.
Benché header sia primariamente pensato come un contenitore di headings questa applicazione non è l’unica possibile. L’elemento può essere utilmente impiegato per racchiudere qualsiasi contenuto abbia un intento introduttivo, come un sommario od un logo.
<header>
<p>Benvenuti nel mio blog:</p>
<h1>Ribrain Blog</h1>
</header>N.B.: header non segna l’inizio di una sezione ma ne contiene solo l’intestazione.
È possibile definire più di un header in una pagina, il primo rappresentante l’introduzione alla pagina stessa, i successivi atti ad introdurre le varie sezioni presenti, come nell’esempio che segue:
<doctype html>
<html>
<head>
<title>La mia Home Page</title>
</head>
<body>
<header>
<h1>Benvenuti nel mio sito personale</h1>
<nav>
<h1>Scopri le varie sezioni!</h1>
<ul>
<li><a href="home.html">Home</a>
<li><a href="contatti.html">Contatti</a>
<li><a href="dovesiamo.html">Dove siamo</a>
</ul>
</nav>
</header>
<div id="content">
<section>
<header>
<h1>News</h1>
<p>Le novità più importanti della settimana, entra per scoprirle nel dettaglio.</p>
</header>
</section>
<section>
<header>
<h1>Blog</h1>
<p>Giorno per giorno, quello che mi ha colpito.</p>
</header>
</section>
</div>
</body>
</html>Come si evince dal codice header può contenere l’elemento nav; ho utilizzato section per definire i vari box poiché hanno, nella Home Page dell’esempio lo scopo di agire da sommario per le varie parti del sito: questo particolare utilizzo di section è esplicitamente indicato nel draft (vedi lezioni precedenti).
hgroup
Definizione formale
L’elemento hgroup rappresenta l’intestazione di una sezione. È utilizzato per raggruppare un set di elementi h1-h6 qualora l’heading possegga livelli multipli come sottointestazioni, titoli alternativi o taglines (slogan che solitamente accompagnano il brand, spesso riportati in corsivo ad es.: "Ribrain.Il tecnico al tuo servizio").
Nei casi di un sommario di un documento o di un indice (outline) il testo degli elementi appartenenti un tag hgroup è definito essere il testo dell’heading con rank più alto presente nel gruppo; qualora esistessero più elementi di uguale rank come il testo del primo di questi; laddove non esistesse alcun heading il testo di hgroup sarebbe una stringa vuota; altri heading (di più basso grado o rank) presenti in hgroup definiscono sottotitoli o sottointestazioni.
Un esempio minimale:
<hgroup>
<h1>Storia di HTML</h1>
<h2>Le prime fasi</h2>
</hgroup>Un software che estraesse l’intestazione principale ignorando i sottotitoli (tale software esiste ed è detto outliner) mostrerebbe solo il testo dell’heading più alto in grado (rank) quindi "Storia di HTML".
hgroup non ha ovviamente senso laddove non vi sia necessità di utilizzare sottotitoli come nell’esempio che segue:
<article>
<h1>Titolo dell'articolo</h1>
<p>testo dell'articolo</p>
</article>Nel caso in cui in aggiunta al titolo compaiano informazioni aggiuntive è corretto utilizzare l’elemento header:
<article>
<header>
<h1>Titolo dell'articolo</h1>
<p>Redatto da Riccardo Brambilla</p>
</header>
<p>testo dell'articolo</p>
</article>Quale è quindi lo scopo di introdurre hgroup? L’outliner. È aperta per questo motivo una vivace discussione che ha già portato una volta all’esclusione dell’elemento dalle specifiche, salvo poi reintegrarlo successivamente. Il destino di hgroup è di conseguenza, al momento, incerto..
footer
Definizione formale
L’elemento footer rappresenta il pié di pagina per il più vicino elemento che ne definisca l’ambito (article, aside, nav, section). Un footer tipicamente contiene informazioni a proposito della sezione a cui si riferisce come l’autore, link a documenti correlati, copyright.
Laddove il footer contenesse intere sezioni assumerà la funzione di appendice, di indice o di contenitore dei termini di lunghi contratti di licenza, nel caso in cui l’elemento parent più diretto fosse il body il footer si applicherà come pié di pagina per l’intero documento.
Il draft ricorda inoltre che sebbene tipicamente il footer appaia al termine di una sezione non è strettamente necessario definirlo come ultimo elemento.
La specifica consiglia inoltre di inserire informazioni come i contatti dell’autore e/o dell’editore in un tag address, opportunamente wrappato da un tag footer.
Il tag footer ha quindi l’effetto di sostituire linee di codice ora tipicamente definite in questo modo:
<div id="footer">© 2012 MrWebmaster.it - author Riccardo Brambilla</div>con la nuova sintassi:
<footer>© 2012 MrWebmaster.it - author Riccardo Brambilla</footer>Come esplicitato nella definizione l’elemento trova impiego anche nell’indicare informazioni addizionali di una sezione o di un articolo:
<article>
<h1>Il tag footer</h1>
<p>L'elemento footer rappresenta...</p>
<footer>Pubblicato da Ribrain</footer>
</article>L’elemento article qui definisce l’ambito del footer.
Ne deriva logicamente che possano esistere, come già descritto per il tag header, più elementi footer in un documento.
Una interessante annotazione presente nel draft ci indica come l’elemento possa utilmente contenere anche molto materiale: navigazione, testo e addirittura immagini. È in effetti un approccio molto comune nel design moderno dei siti web avvalersi dei cosiddetti "fat footers", sezioni molto consistenti in termini di spazio visivo occupato e di quantità di contenuti ospitati.
