Corsi on-line

Relazione tra gli elementi “article” e “section” in HTML5

Secondo quanto riportato dalle specifiche del W3C, in HTML5 l’elemento article rappresenta un componente di una pagina Web che delimita un contenuto indipendente (self-contained), riutilizzabile e distribuibile; tale definizione può valere, ad esempio, per un post, un commento, un widget, un contributo su un social network o un intervento su un forum di discussione.

HTML5

L’elemento section rappresenta invece un documento generico, o la porzione di una Web application, in grado di delimitare un insieme di contenuti comuni a livello tematico; sono quindi posizionabili all’interno di section i capitoli di una guida, le varie schede presenti in una divbox, una Home Page che evidenzi i diversi contenuti di un sito Web o le sezioni di un tutorial.

Sulla base di un’analisi superficiale, si potrebbe ipotizzare che article possa essere contenuto in section mentre non sia possibile la fattispecie opposta, ma ciò non è vero; quest’ultimo è infatti utilizzabile per suddividere il contenuto del primo in elementi logici corredati tramite intestazione delimitata da header tag. Un semplice esempio di quanto detto potrebbe essere il seguente:

<article>
  <h1>Il mondo animale</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut..</p>
  <section>
    <h2>I mammiferi</h2>
    <p>Pellentesque et tristique ligula. Nullam eget porttitor augue..</p>
  </section>
  <section>
    <h2>I rettili</h2>
    <p>These juicy, green apples make a great filling for apple pies...</p>
  </section>
</article>

Al contrario, senza chiarire ulteriormente il concetto, le specifiche del W3C indicano che un elemento section può contenere article quando “appropriato”:

<section>
  <h1>La poesia in Italia</h1>
  <article>
    <h2>Montale</h2>
    <p>In hac habitasse platea dictumst. Sed adipiscing nisi..</p>
  </article>
  <article>
    <h2>Ungaretti</h2>
    <p>Phasellus elementum eleifend vestibulum. Aliquam tempus..</p>
  </article>
</section>

Un esempio riguardante l’utilizzo di article in section, potrebbe essere quindi quello di una pagina destinata ad ospitare le categorie di un blog.

Post correlati
I più letti del mese
Tematiche