Dopo aver analizzato tutti i metadati che compongono l’head di un documento HTML5, possiamo tuffarci nella parte più corposa: il body.

Body

Se l’head non è stato omesso, il body deve essere il secondo elemento presente nella struttura dell’html.

I tag body di apertura e chiusura possono essere omessi solo se:

• la prima riga dopo l’apertura non è né un commento né un metadata (meta, link, script, style o template)
• l’ultima riga prima della chiusura non è un commento

Article

La definizione ufficiale del consorzio è molto chiara, per cui ve la copio pari pari:

“The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

La segmentazione in article è molto importante dato che permette di dividere gli elementi per semanticità.

Anche nel caso di article dentro altri article, la definizione rimane: l’article più interno deve rappresentare un’istanza indipendente ma che sia legata in modo semantico all’article nel quale è contenuto.

Ad esempio, questa struttura nested appena descritta può essere usata per evidenziare i commenti in fondo ai post. All’interno di un article generale (il blog post) se ne inserisci un altro interno che conterrà tutti i commenti (che sono indipendenti rispetto al post ma sono semanticamente connessi)

Attenzione: se in un determinato documento c’è la presenza di un solo grande article, il consorzio consiglia di sostituire questo elemento con main.

Section

L’elemento section viene utilizzato per circoscrivere dei contenuti che sono temaicamente correlati o che forniscono lo stesso tipo di informazione.

L’esempio citato dal consorzio per definire l’uso dei section è il caso di una tesi divisa in capitoli: la tesi nel suo insieme è un article, mentre ogni capitolo è un elemento section, contraddistinto da un suo heading (h1-h6).

L’utilizzo degli heading, in cima a ogni section, è consigliato, non obbligatorio.

Regoletta da ricordare – Se si è indecisi tra article o section,per un determinato contenuto, bisognare porsi una domanda: questo specifico testo può essere distribuito all’esterno, senza maggiori informazioni, senza che risulti “orfano” o incomprensibile? Se si, allora article è corretto, altrimenti siamo in presenza di uno dei tanti section che dovrebbero comporre un article più grande.

L’esempio fornito dal consorzio per definire article e section, è molto intuitivo:

 

  
Apples
  
Tasty, delicious fruit!
 
 
The apple is the pomaceous fruit of the apple tree.
 

  
Red Delicious
  
These bright red apples are the most common found in many
  supermarkets.
 
 

  
Granny Smith
  
These juicy, green apples make a great filling for
  apple pies.
 

Nav

L’elemento nav viene utilizzato per definire i menu di navigazione dato che dovrebbe contenere gruppi di link verso altre pagine del sito o verso altre parti della pagina attuale.

(non tutti i gruppi di link devono essere inseriti dentro un nav dato che questo elemento è stato introdotto per i principali menu di navigazione)

La sintassi è molto semplice:

Aside

L’elemento aside è utilizzato per circoscrivere elementi separati rispetto al contenuto ma che sono correlati o collegati in modo indiretto.

Data questa definizione molto precisa, spesso l’aside viene utilizzato per contenere interamente le sidebar presenti nei siti moderni.

In realtà, l’elemento aside non deve necessariamente trovarsi di lato rispetto al contenuto ma può essere anche precedente o antecedente, purché rispetti le condizioni di rilevanza esposte in alto.

Headings h1 – h6

Gli headings sono elementi che vanno dall’h1 fino all’h6 e che sono ordinati per rilevanza (chiamato rank dal consorzio) ove l’h1 è quello con maggiore rank.

Il primo heading in un determinato contenuto, ci dice il consorzio, dovrebbe rappresentare il titolo semantico di quel determinato elemento section.

I successivi heading, se di pari rank dovrebbero arprire nuovi section, altrimenti, se di rank inferiore, dovrebbero aprire sub-section.

Per chiarire questo concetto, ci rifacciamo all’esempio con le mele del consorzio:

 
Apples
 
Apples are fruit.
 

  
Taste
  
They taste lovely.
  

   
Sweet
   
Red apples are sweeter than green ones.
  
 
 

  
Color
  
Apples come in various colors.
 

Header

L’elemento header, da non confondersi con l’head, serve per introdurre il contenuto del suo successivo elemento section.

Quindi, di per se, l’elemento header non apre nuove sezioni semantiche, ma fa da apripista per quelle già presenti.

All’interno dell’header possono essere inseriti headings semantici (che descrivi il section successivo), oppure un nav con un menu per navigare all’interno dell’articolo, e così via.

Footer

Il footer è l’inverso dell’header, ossia contiene informazioni di chiusura legate al section che lo precede. Come per l’header, anche il footer non apre un nuova sezione semantica, ma contribuisce a descrivere quella precedente.

W3C consiglia di inserire nel footer elementi come: appendici, license, indici, credits e così via.

E’ importante notare che, come indicato dal corsorzio, se una determinata informazione appare utile sia per l’header che per il footer, allora è consigliabile inserirla in entrambi gli elementi.

Address

L’elemento address viene utilizzato per definire informazioni di contatto legate all’article più vicino.

All’interno di questo tag, devono essere specificate solo informzioni di contatto, e quindi:

• link verso il sito dell’autore
• link verso social legati all’articolo
• indirizzi email di autori / contributori
• e così via

Riepilogo

Nella pagina del consorzio dedicata alle sezioni, c’è questa ottima tabella che riepiloga tutti gli elementi visti in precedenza con un piccolo esempio per ognuno.

Le sezioni che abbiamo studiato, permettono di creare l’impalcatura che definisce nel modo più accurato possibile i contenuti di un documento HTML5.

Considerato che ben presto questo sarà lo standard universale e che, se già non è così, inciderà sul posizionamento nei motori, conviene studiarsi bene la sintassi e il significato di ogni elemento!