Menu
<article>Un <article> è definito come un frammento indipendente e autonomo di contenuto: ad esempio l’articolo di un blog, o una notizia su un sito di informazioni.
Per esempio:
<article>
<h1>Il blog di Mattia Frigeri è una vera figata!</h1>
<p>Tra l'altro Mattia è anche un runner eccellente, corre forte e lontano...</p>
<h2>Kílian Jornet i Burgada celebra Mattia</h2>
<p>In un'intervista, il famoso ultrarunner spagnolo racconta: "Sarebbe un onore potermi confrontare con un atleta come Mattia, c'è molto da imparare, mi piacerebbe sfidarlo in qualche gara".</p>
</article>
Sorvolando sulla veridicità del testo, il contenuto di questo documento rispetta quanto detto sopra: potremmo infatti estrapolarlo e ridistribuirlo ovunque nel web senza ulteriore contestualizzazione. Volendo esagerare, si potrebbe anche trasformare in un piccolo teaser con un link che rimandi a un eventuale contenuto integrale, così:
<article>
<a href="articolo-completo.html">
<h1>Mattia Frigeri, il super ultrarunner</h1>
<p>Mattia stabilisce il nuovo record FKT dalla Terra alla Luna.</p>
<p>Leggi di più...</p>
</a>
</article>
Si possono anche annidare gli <article> all’interno di altri <article>, come nel caso della trascrizione di un video:
<article>
<h1>Le star dell'ultrarunning inneggiano a Mattia Frigeri</h1>
<video>…</video>
<article class="trascrizione">
<h1>Trascrizione</h1>
<p>Jim Walmsley: "È davvero imprendibile!"</p>
<p>Andreas Reiterer: "Impossibile stargli dietro, soprattutto in salita..."</p>
</article>
</article>
La trascrizione (cioè il tag <article> interno) rappresenta un documento completo, ma è anche collegato a livello semantico al contenuto principale (il tag <article> esterno) come vuole la specifica.
<section>Il tag <section> invece viene utilizzato per suddividere un documento in aree differenti. Ad esempio se si tratta di un <article>:
<article>
<h1>Elenco di roba super importante</h1>
<h2>Quando si esce di casa</h2>
<p>Prendere chiavi, portafoglio, cellulare...</p>
<h2>Se si parte per un viaggio</h2>
<p>Controllare l'olio, il tragitto, salutare mamma...</p>
<h2>In una gara di ultratrail</h2>
<p>Bere spesso, mangiare spesso, coprirsi adeguatamente...</p>
<strong>Controlla bene cosa ho scritto!</strong>
</article>
Domanda: la frase “Controlla bene cosa ho scritto!” è riferita all’intero documento o alla parte di informazione sotto l’ultimo <h2> (“Durante un ultratrail”)? Con HTML4 non potremmo mai saperlo, ma con HTML5 ci viene in aiuto il tag <section>:
<article>
<h1>Elenco di roba super importante</h1>
<section>
<h2>Quando si esce di casa</h2>
<p>Prendere chiavi, portafoglio, cellulare...</p>
</section>
<section>
<h2>Se si parte per un viaggio</h2>
<p>Controllare l'olio, il tragitto, salutare mamma...</p>
</section>
<section>
<h2>In una gara di ultratrail</h2>
<p>Bere spesso, mangiare spesso, coprirsi adeguatamente...</p>
</section>
<strong>Controlla bene cosa ho scritto!</strong>
</article>
Qui non ci sono dubbi: la frase all’interno di <strong> si riferisce a tutto il tag <article>, e non a una delle sue parti. Una precisazione: perché non ho diviso il tag <article> in tanti piccoli <article> annidati? Perché a livello semantico non sarebbe stato corretto: non sono infatti “entità indipendenti e autonome di contenuto”.
Si possono avere degli <article> dentro ad altri <article>, e delle <section> dentro a degli <article>. Ma degli <article> dentro a delle <section>?
Anche questo è permesso: pensa alla pagina di un blog divisa in due parti, una che parla di libri e l’altra di auto d’epoca. Vuoi strutturarle con lo stesso markup, ma vuoi mostrarle come tematicamente distinte (magari anche attraverso il CSS). Di nuovo, con HTML4 saresti stato obbligato a utilizzare un generico <div>, ora invece puoi sfruttare le <section>:
<div class="content">
<section>
<h1>Gli ultimi libri del mese</h1>
<article>
<h2>Come correre 400km in meno di 24 ore, di Mattia Frigeri</h2>
<p>Bla bla bla è facilissimo bla bla...</p>
</article>
<article>
<h2>Pettegolezzi sui tag HTML5, sempre di Mattia Frigeri</h2>
<p>Bla bla bla abbasso HTML4! Bla bla...</p>
</article>
</section>
<section>
<h1>Le auto più vecchie della storia</h1>
<article>
<h2>Ritrovata la FIAT di Ötzi</h2>
<p>Rinvenuti i resti della Panda dell'uomo del ghiaccio...</p>
</article>
<article>
<h2>Come sapere se la tua Citroën Dyane è Euro 5</h2>
<p>È facile: non lo è.</p>
</article>
</section>
</div>
Perché al posto delle <section> non ho usato degli <article>? Perché in questo caso ognuna delle <section> è composta da un elenco di entità che sono indipendenti (i singoli <article>), ma non sarebbe indipendente l’insieme che le raggruppa.
La cosa più importante da ricordare per sapere se usare un <article> o una <section>, quindi, è tenere a mente la parola autonomo (in inglese self-contained): le <section> servono a raggruppare contenuti legati tra loro dal significato, e così anche gli <article>, ma il contenuto di un <article> potrebbe vivere di vita propria, anche al d fuori del sito in cui è stato concepito.
Questo blog è curato e aggiornato per pura passione e amore degli argomenti. Se tuttavia ritieni che per te sia stato di qualche valore, puoi mettermi 5 stelline su Google, o valutare di assumermi per realizzare il tuo nuovo e fantastico sito web, oppure offrirmi una birra, un caffè o una Ferrari.
Basta cliccare qui sotto ↓
Contattami o iscriviti alla mia (pazzesca) newsletter
© 2023 Mattia Frigeri
Ricordami di aggiornare l’anno il primo di gennaio ;)
Privacy Policy – Cookie Policy – Aggiorna preferenze
P.I. 02542140344 – C.F. frgmtt81a24g337z