Tra le questioni sollevate intorno ad HTML5, c'è l'indecisione nella scelta tra article o section. Anche se in prima istanza verrebbe da dire "nessuno dei due, meglio usare un div", vale la pena soffermarci qualche minuto a valutare la cosa.
L'introduzione di questi due nuovi elementi ci permette, in qualche modo,
di riflettere su ciò che stiamo facendo mentre realizziamo un layout HTML.
Div
Se vogliamo semplicemente racchiudere i contenuti per lo styling, allora occorre usare semplicemente un <div>. Il significato del div non è cambiato tra una versione e l'altra di HTML e spesso si è rivelato come la panacea a tutti i problemi: se ci serve semplicemente un elemento che raggruppi alcuni contenuti, senza la pretesa di collegamenti o correlazioni di tipo semantico, allora il <div> è quello che serve.
Section
Le cose cambiano quando decidiamo che i contenuti hanno un significato semantico, in questo caso effettivamente possiamo (o dobbiamo) usare i tag che HTML5 ci mette a disposizione.
Iniziamo con uno sguardo all'elemento section. La specifica HTML5 dichiara che:
«L'elemento <section> rappresenta una generica sezione di un documento o applicazione. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti, in genere con un titolo.»
continua poi con
«Gli autori sono incoraggiati ad utilizzare l'elemento article al posto di <section> quando il contenuto ha una relazione con questo elemento (ovvero con article ndR)».
Quindi section è un elemento che serve a raggruppare porzioni di pagina che hanno qualcosa in comune, ma se pensiamo più strettamente ad un contenitore (che definisce una entità come un post, più che una porzione di pagina), meglio rivolgere l'attenzione ad article.
Se queste definizioni creano un pò di confusione cerchiamo di esaminare le occasioni in cui utilizzare o meno l'elemento section.
LEGGI » Quando utilizzare il tag section
Quando utilizzare il tag section?
Ecco un elenco di alcuni casi in cui è "lecito" pensare di utilizzare section:
- negli slider o nelle interfacce a tab (quelle con le linguette), per definirne le singole sezioni.
- per dividere una pagina "termini e condizioni" (o simili) in sezioni numerate, se necessario anche con elementi section annidati
- per dividere le diverse sezioni di una pagina web o di un portfolio
Ecco invece un elenco di occasioni in cui non utilizzare section:
- per dividere il contenuto dalla intestazione e piè di pagina, in questo caso meglio usare <div>
- per racchiudere uno schema a tab per il DOM o lo styling
- solo per aggiungere un bordo o un'ombra, meglio <div>
- per il wrapper della pagina o per definire finte colonne, sempre meglio <div>
- per evitare l'incompatibilità con IE6, di nuovo, usare <div>, piuttosto che section annidati
- per presentare la biografia di qualcuno che posta qualcosa su un blog, in questo caso meglio usare <aside> invece
Prendiamo per esempio un giornale, è diviso in sezioni: notizie, cronaca e sport. Ognuna di queste ha un titolo generico e contiene informazioni relative alla sezione. È probabile che ciascuna di queste sezioni conterrà articoli, il che ci porta a parlare di article
LEGGI » Come utilizzare il tag article
Article
Potremmo dire che article si adatta ad essere un elemento specifico di <section> in quanto:
rappresenta una sezione autonoma in un documento, pagina, applicazione o sito e che è, in linea di principio, indipendentemente distribuibile o riutilizzabile.
Così, attraverso l'analogia del giornale, la sezione sportiva conterrà articoli che riguardano lo sport, con ogni singolo pezzo e la propria intestazione, in modo da essere completamente autonomo.
La specifica HTML5 sottolinea anche che è melgio utilizzare l'elemento article anziché l'elemento section quando questo elemento assolve la funzione di syndication, ovvero può essere considerato alla stregua di un item di RSS o di un entry di ATOM.
Il contenuto di <article>, ha dunque un senso autonomo, semanticamente parlando. Tale considerazione è a nostra discrezione, ma l'analogia del giornale ci viene ancora in aiuto: con i suoi feed RSS il giornale pubblica gli articoli con link, descrizione e altre informazioni, e ogni articolo è autonomo.
Il contenuto quindi ha senso indipendentemente dal suo contesto, cioè anche quando tutti gli elementi circostanti possono essere eliminati.
Ecco qualche esempio. È possibile utilizzare <section> per dividere l'articolo in gruppi logici con le intestazioni:
<article>
<h1>HTML.it</h1>
<p>Annidiamo section in article...</p>
<section>
<h2>A favore</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>
<section>
<h2>Contro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>
</article>Nel caso, un elemento <section> può contenere elementi <article>. Altri esempi comuni sono le pagine iniziali di un portale o di un blog:
<section>
<h1>HTML.it - Annidamento di article in section</h1>
<article>
<h2>Titolo Uno</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</article>
<article>
<h2>Titolo due</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</article>
<article>
<h2>Titolo Tre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</article>
</section>Annidamento
Possiamo quindi inserire un <article> all'interno di un <section>, e che lo stesso articolo può essere suddiviso in sezioni. Questo, in termini di HTML5, è perfettamente strutturato e di solito è una buona idea suddividere un articolo lungo in più sezioni.
Si potrebbero fare molti esempi di utilizzo di article e section, ma alla fine resta fondamentale pensare al contenuto e a come dovrebbe esser presentato semanticamente.
A orientarci deve essere quindi il buon senso, oltre alle linee guida: <article> èun tipo specializzato di <section>, ha un significato semantico più specifico rispetto a <section>, in quanto è un contenitore indipendente. Di contro <section> è solo un blocco di contenuti correlati, e <div> è solo un blocco.
Infine, l'attributo pubdate non si applica a <section> ;).
