HTML5 introduce due nuovi elementi che pongono dei problemi semantici riguardanti il loro uso: section e article. In questo articolo spiegherò le differenze esistenti tra questi due elementi cercando di essere il più chiaro possibile.
section
section è un contenitore generico che può racchiudere le varie parti in cui è strutturato un documento HTML5. Immaginate di aver inserito il contenuto di un libro in una pagina. Potete usare questo elemento per marcare i vari capitoli, che rappresentano le macrosezioni del documento:
<section id="cap1">
<header>
<hgroup>
<h1>Titolo</h1>
<h2>Descrizione</h2>
</hgroup>
</header>
<!-- contenuto -->
<footer>
<!-- note a piè di pagina -->
</footer>
</section>
<!-- altri capitoli -->
In altre parole: section è un macrocontenitore generico per i contenuti della pagina che crea macrosezioni dello stesso.
article
A differenza di section, article è un microcontenitore specifico (non generico) per marcare il contenuto principale di un documento o di una sezione di esso, come per esempio post di un blog, articoli, contenuti delle pagine eccetera. Può essere usato in combinazione con section per strutturare in modo completo un documento HTML5. Per esempio, possiamo riscrivere il codice precedente come segue aggiungendo article:
<section id="cap1">
<header>
<hgroup>
<h1>Titolo</h1>
<h2>Descrizione</h2>
</hgroup>
</header>
<article>
<!-- contenuto -->
</article>
<footer>
<!-- note a piè di pagina -->
</footer>
</section>
<!-- altri capitoli -->
In altre parole: article è un microcontenitore specifico per i contenuti principali della pagina all'interno di sezioni più generiche. Un tipico esempio è rappresentato dai recenti temi per Wordpress, come TwentyTen e Yoko, che usano appunto questo elemento per marcare i post e i contenuti delle pagine.