Page 42 - Guida tascabile HTML5

NOTA Tenete presente che l’utilizzo dei tag <article> e <section> non è in alcun modo
limitato all’interno del tag <main>: se il contenuto che state marcando prevede per
esempio la presenza di articoli nella barra laterale, nulla vi impedisce di nidificare tali
tag all’interno di <aside>, rispettando le considerazioni fin qui fatte.

Un contenuto autonomo: <article>

La specifica HTML5 è piuttosto chiara nell’identificare il ruolo del tag
<article>. Ciò che caratterizza il contenuto marcato con questo tag è proprio

l’autonomia: è un contenuto che mantiene senso compiuto anche quando distribuito

all’esterno della pagina. Provate a pensare al post di un blog o all’articolo di una
pubblicazione online, che senza dubbio potrebbero essere ripresi su altri siti

conservando la propria identità.

NOTA Un buon sistema per sciogliere eventuali dubbi può essere quello di
domandarsi se il contenuto che vogliamo identificare come <article> sarebbe adatto

come singola voce in un feed RSS.

Tenete presente che i tag <article> possono essere nidificati per identificare
contenuti più specifici correlati a quello principale, ma con una propria dignità e

autonomia. Un classico esempio riguarda i commenti in coda ai post di un blog:

ogni commento fa parte del post, ma conserva la propria indipendenza e può avere
dettagli specifici (come per esempio informazioni sull’autore o sulla data di

pubblicazione) non legati al contenuto principale.

Qui di seguito trovate un esempio di markup ideale che illustra l’utilizzo del tag
<article> per strutturare un contenuto:

<article>
<header>
<h1>Il tag article</h1>
<p>Un esempio di markup completo</p>
</header>
<p>Il contenuto è identificato in modo preciso</p>
<footer>
<p>Pubblicato il <time>2014-10-28</time></p>
</footer>
</article>
Come vedete, l’utilizzo combinato dei tag <header> e <footer> permette di

ottenere un markup molto chiaro e immediato, che garantisce un’interpretazione

univoca.

Identificare le sezioni: <section>