Nuovi Elementi Semantici della Struttura HTML5

Prima di passare in rassegna alcuni nuovi elementi semantici di HTML5 vorrei soffermarmi su questo termine “semantico” che a prima vista sembra non sortire alcun effetto pratico, ed infatti con o senza questi nuovi elementi l’aspetto estetico delle nostre pagine web non è cambiato molto, in alcuni casi direi proprio per niente. Ma allora a che cosa serve rispettare la semantica di un elemento e perchè a questa viene data tanta importanza?

Chi fa pagine web sa che fino ad oggi soltanto gli elementi <h1> … <h6> usati per i titoli, creavano strutture a blocchi a livello di DOM, dando alla pagina web una struttura visibile anche da sistemi diversi dai normali browser, come ad esempio quelli usati dai non vedenti. L’introduzione dei CSS ha permesso di rivoluzionare questa struttura potendo assegnare ai vari elementi attributi tali da renderli a loro volta blocchi o comunque elementi diversi da quello per i quali erano stati pensati, e così ognuno ha impaginato dati come meglio credeva, l’aspetto estetico era più che gradevole e nessuno si è mai preoccupato di andare oltre. HTML5 invece si preoccupa proprio di questo aspetto, creare nuovi elementi per definire blocchi che un browser è in grado di interpretare come tali a prescindere dagli attributi impostati nel suo foglio di style.

<section>…</section>

L’elemento section demarca un insieme di contenuti fra di loro correlati. Rappresenta una sezione generica del documento.

Viene dunque usato per i capitoli, le varie sezioni di una tesi, la stessa home page potrebbe essere divisa in sezioni: introduzione, notizie, contatti.

<nav>…</nav>

L’elemento <nav> demarca una serie di link utili per la navigazione.

Viene dunque usato per raccogliere blocchi di links come i menù o qualsiasi altro collegamento utile alla navigazione, non necessariamente tutti i links devono essere contenuti in questo tag.

<article>…</article>

L’elemento <article> demarca un articolo, un’informazione, un contenuto che sia indipendente dal resto del documento.

Viene dunque usato per racchiudere tutte quelle informazioni che possono essere indipendenti dal resto del documento e come tali essere riprese e riutilizzate per conto proprio.

<aside>…</aside>

L’elemento <aside> demarca un contenuto di poca importanza rispetto al documento, se ne potrebbe fare a meno senza incidere col resto del documento stesso.

Viene dunque usato per note o commenti non importanti, per sezioni laterali, per annunci pubblicitari e qualsiasi altro contenuto che si ritiene slegato dal contenuto principale della pagina stessa.

<hgroup>…</hgroup>

L’elemento hgroup funge da contenitore per due o più elementi di intestazione correlati fra loro.

Viene dunque usato per raggruppare più elementi di intestazione quando ci sono diversi livelli di titoli dal primo al sesto livello: <h1>…<h6> come sottotitoli, ecc. assegnando così una sola intestazione di titolo più importante.

<header>…</header>

L’elemento header demarca l’intestazione di una sezione.

Viene dunque usato per elementi introduttivi o di supporto al documento, può essere ripetuto dal momento che in un documento possono esserci più sezioni e di conseguenza più intestazioni, basti pensare ad un blog, per esempio, dove ogni notizia ha la sua intestazione.

<footer>…</footer>

L’elemento footer demarca il pie di pagina o di sezione.

Viene dunque usato per parti di codice che di solito si inseriscono a fine pagina ma anche a fine sezione nel caso in cui una pagina avesse più di una sola sezione. Per esempio le note sull’autore, i links di riferimento, ecc.

Oltre a questi ci sono altri nuovi tags introdotti da HTML5, li vediamo nella lezione successiva.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.