article e section

L’HTML5 ha introdotto un mucchio di nuovi tags, molti dei quali di carattere semantico. Tra questi rientrano anche gli elementi article e section, i quali potrebbero aver generato non poca confusione per via delle loro similitudini.

Cerchiamo quindi di fare un po’ di chiarezza diradando la nebbia creatasi intorno a questi due tags, spiegando nella maniera più chiara possibile qual è il loro ruolo all’interno della struttura del documento, e cos’è che li distingue nitidamente.

P.S: se stai leggendo quest’articolo potresti trovare interessanti quelli relativi a due succulente novità introdotte nel CSS3, ovvero il box sizing e il flexbox. Che ne dici, ti va di dargli un’occhiata?

Che cosa sono i tags semantici?

Prima di addentrarci nell’articolo vero e proprio approfondendo il ruolo di article e section, riflettiamo un attimo sul termine semantico.

La semantica è quel ramo della linguistica dedito allo studio dei fenomeni del linguaggio, non da un punto di vista morfologico o fonetico, bensì guardando al loro significato.

Per farla breve, semantico è un aggettivo che si riferisce al significato delle parole.

Prima dell’avvento dell’HTML5, le pagine web venivano strutturate facendo largo uso del tag div. Quest’ultimo però non ha alcuna valenza semantica, al contrario di elementi come header, footer, o appunto article e section. Il termine div infatti, preso così come lo si legge, non esprime alcun significato. Se ad esempio invece di div leggessimo aside, capiremmo immediatamente che l’elemento in questione si riferisce ad una barra laterale.

Grazie ai tags semantici introdotti nell’ultima versione del noto linguaggio di markup, otteniamo una gestione del documento più precisa ed ottimale. La pagina web viene infatti suddivisa in vari moduli, ciascuno dei queli progettato per uno scopo ben preciso.

Ad orientarci nell’utilizzo di article e section sarà importante anche e soprattutto il buon senso, oltre naturalmente alle linee guida.

Section

Iniziamo analizzando il tag section, prendendo come riferimento la specifica HTML5.

“L’elemento section rappresenta una generica sezione di un documento o applicazione. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti.”

La specifica prosegue dicendo che l’elemento section dovrebbe essere identificato da un heading contenuto al suo interno.

A primo impatto potremmo averci capito poco e niente, quindi tentiamo di spiegare il concetto “a parole nostre” soffermandoci sul punto chiave della linea guida raggruppamento tematico di contenuti. Il tag section va dunque considerato un contenitore semantico di carattere tematico, e ciò significa che ospiterà al suo interno elementi correlati fra di loro.

Niente ad ogni modo è meglio di un esempio pratico per dipanare ogni dubbio.

Supponiamo di avere una guida completa di capitoli, e di volerla inserire sul nostro sito. È giusto utilizzare section in questo caso?

Certo! Grazie al suo ruolo potremo infatti suddividere la nostra guida in più sezioni, capitolo per capitolo, in questo modo.

<section>
  <h2>Capitolo 1</h2>
  <p>Lorem ipsum dolor sit amet..</p>
</section>

<section>
  <h2>Capitolo 2</h2>
  <p>Lorem ipsum dolor sit amet..</p>
</section>

<section>
  <h2>Capitolo 3</h2>
  <p>Lorem ipsum dolor sit amet..</p>
</section>

Section però, non è solo dividere un blocco in contenuti tematici.

Possiamo difatti utilizzarlo, più semplicemente, al fine di indicare le varie sezioni in cui è ripartita una pagina web, come ad esempio l’area riservata ai termini di servizio, quella dei contatti, quella delle notizie e così via.

<section id="condizioni">Area riservata ai termini di servizio</section>
  
<section id="contatti">Area riservata ai contatti</section>
    
<section id="news">Area riservata alle news</section>

Article

Passiamo ora ad analizzare il tag article, citando ancora una volta la specifica HTML5.

“L’elemento article rappresenta una sezione autonoma in un documento, pagina, applicazione o sito e che è, in linea di principio, ridistribuibile o riutilizzabile indipendentemente.”

Così come abbiamo fatto per section, soffermiamoci sul punto cardine di questa linea guida, ovvero ridistribuibile o riutilizzabile indipendentemente. Queste poche parole sono in linea di massima tutto ciò su cui dobbiamo riflettere prima di pensare di usarlo al posto di section o viceversa.

Article rappresenta quindi un tag con maggiore valore semantico rispetto a section, poiché esso ha un significato autonomo e di conseguenza è indipendente da tutti gli altri elementi che fanno parte della struttura della pagina.

In quale occasione dunque dovremmo scegliere di utilizzare article anziché section?

È presto detto, perchè basta richiamare alla mente  tutti quei contenuti ideati per poter essere ridistribuiti (si pensi al social sharing), come ad esempio il post di un blog/forum, il commento di un utente, un widget e così via.

<article>
  <h2>Torta di mele</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</article>

Article e section l’uno all’interno dell’altro

È lecito pensare di poter ospitare il tag article all’interno di section, ad esempio nel caso in cui avessimo sul nostro sito un’area contenente le varie categorie di un blog.

<section>
  <h2>Calcio</h2>
  
  <article>
    <h3>Campionato serie A</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </article>

  <article>
    <h3>Campionato serie B</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </article>
  
  <article>
    <h3>Campionato serie C</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </article>
</section>

È possibile anche fare il contrario, ovvero inserire section dentro article?

Si, è possibile, ad esempio per strutturare un articolo in gruppi logici. In parole povere, possiamo servirci del tag article per sezionare un articolo in più parti.

<article>
  <h2>Il mondo dei felini</h2>
  <p>Lorem ipsum dolor sit amet...</p>
  
  <section>
    <h3>Il leone</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </section>

  <section>
    <h3>La tigre</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </section>

  <section>
    <h3>Il leopardo</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </section>
</article>

Article e section… e il tag div?

Se dopo aver letto tutto questo ti senti eccitato (e come darti torto) all’idea di iniziare a sperimentare article e section, pensando che div sia stato definitivamente rimpiazzato da questi ultimi… bè, allora ti sbagli di grosso!

Div non è stato sostituito dai nuovi tags, e probabilmente continuerà ad essere il contenitore più usato. Se abbiamo bisogno di applicare dei bordi, delle ombreggiature ed effetti vari, allora la nostra scelta dovrà ricadere su div. Esso rappresenta infatti un contenitore generico, indispensabile per stilizzare un blocco di contenuti o per esigenze di scripting.

Ricapitolando…

  1. I tags article e section non costituiscono un rimpiazzo per il classico div, il quale è un contenitore generico da utilizzare in caso di esigenze di styling o scripting, e quando non esiste alcuna correlazione tematica fra i contenuti al suo interno.
  2. Section definisce una sezione generica di un documento. È utilizzato per raggruppare elementi correlati fra loro dal punto di vista tematico e possiamo avvalercene per sezionare una pagina web, stando sempre attenti nel dare un senso logico al nostro operato.
  3. Article definisce una sezione (non generica) all’interno del documento pensata per poter essere ridistribuita (social sharing). Esso ha dunque un valore semantico maggiore rispetto a section, poiché ciò che contiene ha un senso logico anche da solo, indipendentemente dagli altri elementi che lo circondano.
  4. Sia article che section dovrebbero avere un heading al loro interno. Entrambi possono ospitare un header, ma article può contenere anche un footer.
  5. Se dovessimo fare una scaletta crescente in base al valore semantico di div, section ed article, li troveremmo in quest’ordine preciso.

Infine, come già accennato in precedenza, è bene affidarsi all’intuito e al buon senso. Perchè dovrei usare questo tag al posto di quest’altro? Ha senso quello che sto facendo? Queste sono le domande che dovremmo sempre porci durante la strutturazione di una pagina web.

Share: