Nuovi tag
Quest’oggi vorremmo approfondire il discorso iniziato nel precedente articolo sull’HTML5 presentando semanticamente le novità di questo linguaggio e le potenzialità dei nuovi tag.
Section
L’elemento section è usato per raggruppare contenuti tematicamente relazionati.
Sembra assomigliare ad un elemento <div> che viene spesso utilizzato come un contenitore generico. La differenza sostanziale è che il div non ha un significato semanticamente rilevante, mentre, come già detto, il tag section è usato esplicitamente per raggruppare contenuti che hanno relazioni tra loro.
È possibile sostituire i div con il tag section sempre ricordando, però, di chiedersi prima di tutto se gli elementi che state raggruppando sono relazionati tra loro.
Esempio:
<section>
<h1>Contenuto del documento</h1>
<p>Contenuto del paragrafo</p>
<p>Contenuto scritto da dot4all</p>
</section>
Header
Il tag header è un contenitore per elementi che aiutano la navigazione del sito web (es. menu di navigazione) e che mostrano contenuti introduttivi all’argomento della pagina o di una sezione (es. Titolo, Sottotitolo, etc.).
Dobbiamo ricordare di distinguere il tag header introdotto nell’HTML5 dal tag head già presente in una pagina scritta in HTML precedente all’introduzione della versione 5 del linguaggio.
L’head è unico in una pagina, mentre è possibile avere più di un header; ad esempio un tag header potrebbe essere inserito in una section per definire la parte iniziale di quella sezione specifica. Per definizione, infatti, una section è un raggruppamento tematico di contenuti, generalmente indicato da un titolo.
Esempio:
<section>
<header>
<h1>Contenuto del documento</h1>
</header>
<p>Contenuto del paragrafo</p>
<p>Contenuto scritto da dot4all</p>
</section>
Footer
Il tag footer dovrebbe contenere informazioni riguardo il contenuto dell’elemento a cui è associato (ad esempio di una section).
Esempi di informazioni presenti in un footer potrebbero essere l’autore del contenuto, il copyright, i links a contenuti relazionati, etc.
Questo nuovo tag rivoluziona un po’ il modello che i web designer hanno avuto finora del footer tradizionale: in HTML5, infatti, possiamo avere più footer, uno per ogni contenuto tematico della pagina.
Esempio:
<section>
<header>
<h1>Contenuto del documento</h1>
</header>
<p>Contenuto del paragrafo</p>
<footer>
<p>Contenuto scritto da dot4all</p>
</footer>
</section>
Per rendervi la lettura più semplice e meno impegnativa parleremo degli altri tag del’HTML5 nella seconda parte dell’argomento “Semantica – i nuovi tag”.
