Importanza degli elementi semantici in HTML5

Questo è il post #21 di 31 nella serie “HTML 101 - Le basi”

È sempre una buona idea e una “good practice”, quella di organizzare il nostro documento HTML in sezioni logiche e specialmente quando abbiamo a che fare con grossi documenti.

Precedentemente all’avvento di HTML5, gli elementi div venivano usati per raggruppare il contenuto in sezioni logiche.

Un aspetto negativo dell’usare i divs per il precedente scopo è che un contenuto può essere raggruppato logicamente per diverse ragioni differenti e questo non è sempre ovvio al lettore.

Un altro problema è che i divs non hanno alcun intrinseco significato semantico e una via usata in passato per ovviare a questo problema era di usare attributi del tag per specificare un significato semantico ma questo non era di alcun valore aggiunto per i browser in quanto non è una maniera standardizzata per ottenere lo scopo voluto.

In passato, una struttura abbastanza usata per una pagina Web era quello di avere un header, un area di contenuto principale, un area laterale e un footer e usando gli elementi divs per raggruppare logicamente una tale struttura, avremmo avuto qualcosa di simile a questo:

Ovviamente, assegnare degli attributi ids ai vari divs non portava alcun beneficio all’analisi delle pagine da parte dei motori di ricerca perché tali ids erano soggettivi e anche se era una pratica comune usare ids come header, content, footer, etc., questi non erano standardizzati.

HTML5 introduce diversi elementi nuovi che forniscono un significato più semantico.

Ognuno di questi elementi è usato per raggruppare il contenuto in unità più grandi ma ognuno, raggruppa il contenuto per diverse ragioni.

La ragione principale per usare elementi più specifici è di rendere chiaro, da un punto di vista semantico, perché quel particolare raggruppamento è stato fatto.

Vediamo alcuni dei più importanti nuovi tags di raggruppamento, introdotti in HTML5.

Section

L’elemento section è utilizzato per organizzare il contenuto in sezioni logiche e questi elementi possono essere nidificati fra loro. Possiamo usare questo tag ogni volta che abbiamo la necessità di dividere parti del contenuto in sezioni logiche all’interno della pagina.

Ci sono due linee guida da seguire sul quando vogliamo usare il tag section:

• ogni sezione dovrebbe far riferimento a un dato argomento o contesto
• le sezioni dovrebbero scorrere in maniera lineare all’interno del contenuto della pagina Web

Per esempio, potremmo scegliere di usare un elemento section per l’area del contenuto principale o per raggruppare una lista d’immagini correlate fra loro.

Vediamo un banale esempio di come possiamo convertire un area in cui in passato avremmo usato un div con un attributo class in una sezione:

<!-- old way -->
<div class="main-content-section">
  <!--- main content --->
</div>
  <!--- new way --->
<section>
  <!--- main content --->
</section>  

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.

Article

Un elemento article è usato quando vogliamo raggruppare del contenuto che avrebbe senso anche se estratto dal contesto della pagina Web in cui è utilizzato. Questo tipicamente sarebbe del contenuto che può essere riutilizzato.

Questo tipo di contenuto dovrebbe essere inserito all’interno di un elemento article perché il contenuto è indipendente dal resto della pagina.

Uno degli usi più comuni di questo tag è all’interno di un blog, ogni post del blog è generalmente del contenuto che può esistere in maniera indipendente e quindi andrebbe raggruppato all’interno di un tag article.
Anche i commenti che vengono aggiunti a un post sono tipicamente inseriti all’interno di un tag article.

Inoltre è sempre possibile usare il tag article, invece che il tag section, quando il contenuto è indipendente e riusabile.

Un articolo, specialmente se di grandi dimensioni, spesso viene utilizzato insieme al tag section in modo da organizzarlo meglio sulla base dell’argomento trattato.

Per concludere, un elemento article può avere al suo interno altri elementi article esattamente come accadrebbe nel caso di un blog post e i suoi commenti associati.

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.

Aside

Un elemento aside viene utilizzato per raggruppare del contenuto che non appartiene al normale flusso del documento.

Questo potrebbe, per esempio, essere del contenuto che supporta le informazioni fornite da altro contenuto, informazioni riguardo l’autore o anche informazioni non correlate al contenuto principale del documento come spazio pubblicitario o un calendario degli eventi.

Sotto un aspetto stilistico, un elemento aside viene spesso rappresentato come una barra laterale in modo da non interrompere il flusso di altri contenuti della pagina. Tuttavia, questo ultimo aspetto è compito del CSS e il lavoro dell’autore è quello di indicare che un gruppo di contenuto non è parte del flusso principale e questo viene ottenuto attraverso l’uso del tag aside.

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.

Nav

L’elemento nav è usato per raggruppare un insieme di links.

Un esempio tipico è per esempio quando abbiamo un qualche tipo di menu nella pagina con links interni alla pagina o esterni.

In generale, non tutti i links devo necessariamente essere inseriti in un elemento nav.
Comunque, se il contenuto è principalmente composto da links allora è consigliato inserirlo all’interno di un elemento nav in modo da rendere assolutamente chiaro il significato semantico.

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.

Address

L’elemento address viene utilizzato per fornire informazioni di contatto in riferimento all’intero documento o per un elemento article specifico.

Se utilizzato con riferimento a un elemento article, dovrebbe essere inserito in qualche posto all’interno del tag. Se invece fa riferimento al documento, deve essere inserito all’interno dell’elemento body.

Il tag <address> viene spesso utilizzato all’interno del tag <footer>.

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.

Header

L’elemento header è principalmente usato per descrivere l’intestazione o l’area di superiore di una pagina Web.
Tipicamente, all’interno di questo tag avremo elementi come le intestazioni, il logo e possibilmente un menu di navigazione.

Precedentemente all’ HTML5, avremmo usato un tag div con un attributo class in modo da poterlo stilizzare attraverso l’uso del CSS e da rendere chiaro il suo intento ad altri sviluppatori.
HTML5 introduce il tag header specificatamente per questo task.

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.

Footer

L’elemento footer è molto simile concettualmente all’elemento header ma viene utilizzato alla fine della pagina.
Tipicamente, all’interno di questo tag avremo elementi quali le informazioni di copyright e vari links possibilmente inseriti all’interno di una tag di navigazione.

Alla stessa maniera come per l’ header, prima dell’utilizzo di HTML5 avremmo usato un tag div specificando un attributo class.

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.