HTML5 introduce nuovi elementi strutturali all'insieme di elementi già disponibili nelle specifiche HTML 4 e XHTML. Il bisogno di questi nuovi elementi nasce dalla constatazione che la maggior parte degli sviluppatori è solita usare delle convenzioni ben definite nella nomenclatura degli elementi, convenzioni per lo più applicate all'uso degli attributi class e id. Vediamo di seguito quali sono questi nuovi elementi.
header
L'origine di questo elemento sta nell'uso della seguente marcatura:
<div id="header"></div>
o, in alternativa:
<div class="header"></div>
Come si può notare, questo elemento marca la sezione (o le sezioni) di intestazione di un sito o di un documento. Infatti è possibile avere più elementi header nello stesso documento.
Per esempio, header può essere usato come intestazione principale del sito:
<header id="branding">
<h1>...</h1>
<p id="tagline">...</p>
</header>
o come intestazione delle singole sezioni:
<section id="chapter-1">
<header>
<h1>...</h1>
</header>
</section>
Infine, in un blog può essere usato come intestazione dei singoli post:
<article>
<header>
<h2 class="title">...</h2>
</header>
</article>
footer
L'origine di questo elemento sta nell'uso della seguente marcatura:
<div id="footer"></div>
o, in alternativa:
<div class="footer"></div>
Questo elemento marca quello che tradizionalmente viene considerato il piè di pagina di un documento. Può essere usato sull'intero documento, su una sezione o sui singoli articoli:
<header id="branding">
<h1>...</h1>
<p id="tagline">...</p>
</header>
<!--contenuti-->
<footer id="site-info">
...
</footer>
<section id="chapter-1">
<header>
<h1>...</h1>
</header>
<!--contenuti-->
<footer>...</footer>
</section>
<article>
<header>
<h2 class="title">...</h2>
</header>
<!--contenuti-->
<footer>...</footer>
</article>
article e section
Questi elementi sono in un rapporto di interdipendenza semantica. Il primo definisce il contenuto di specifiche parti di un documento, mentre il secondo serve a marcare parti più generiche di un documento. In altre parole, il primo marca microsezioni, mentre il secondo macrosezioni.
article fa sempre riferimento al contenuto effettivo di un documento, mentre section si riferisce più alla sua divisione logica in sezioni (come appunto dice il nome). Quindi potremo avere la seguente struttura:
<section id="chapter-1">
<header>
<h1>...</h1>
</header>
<article>
<!--contenuti-->
</article>
<footer>...</footer>
</section>
In un blog potremmo avere:
<section id="main">
<article><!--post 1 -->
<header>
<h2 class="post-title">...</h2>
</header>
<!--contenuti-->
<footer></footer>
</article>
<article><!--post 2 -->
<header>
<h2 class="post-title">...</h2>
</header>
<!--contenuti-->
<footer></footer>
</article>
<article><!--post 3 -->
<header>
<h2 class="post-title">...</h2>
</header>
<!--contenuti-->
<footer></footer>
</article>
</section>
aside
Questo elemento marca del contenuto secondario e ausiliario ai fini della comprensione del contenuto principale. In altre parole, rimuovendo questo elemento è ancora possibile comprendere il significato del contenuto principale.
Possiamo usare questo elemento per sostituire la classica sidebar di un sito:
<section id="main">...</section>
<aside id="secondary">...</aside>
WordPress lo usa come contenitore per i widget del tema TwentyEleven:
<div id="secondary">
<aside class="widget">...</aside>
<aside class="widget">...</aside>
</div>
Un uso alternativo sarebbe quello dei pullquote ottenuti combinando questo elemento con blockquote:
<aside class="pullquote">
<blockquote>...</blockquote>
</aside>
nav
Questo elemento viene usato per gestire le aree di navigazione di un sito:
<nav id="primary-navigation">
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</nav>
Ruolo di visualizzazione CSS predefinito
Tutti questi elementi sono di tipo blocco (block):
article, aside, header, footer, section, nav {
display: block;
}
Gestione degli elementi in Internet Explorer 8 (ed inferiori)
Questi elementi non vengono riconosciuti da Internet Explorer 8 (ed inferiori) a livello del DOM. Occorre quindi aggiungere il seguente codice tramite commenti condizionali:
<head>
<!--[if lte IE 8]>
<script type="text/javascript">
var elements = ['article', 'aside', 'header', 'footer', 'section', 'nav'];
for(var i = 0; i < elements.length; i += 1) {
document.createElement(elements[i]);
}
</script>
<![endif]-->
</head>