Il tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito; infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine.
Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, l’articolo di un blog, un commento, un widget interattivo, o qualsiasi cosa che abbia un contenuto indipendente.
Prima di vedere un esempio concreto bisogna chiarire alcuni concetti riguardo il suo utilizzo:
<article>
sono nidificati, gli <article>
interni rappresentano gli articoli che sono in linea di principio relativi al contenuto dell’<article>
esterno. Ad esempio, un blog che accetta commenti dagli utenti potrebbe rappresentarli come <article>
figli annidati all’interno dell’elemento padre <article>
;<article>
non devono essere replicate all’interno degli elementi nidificati all’interno dello stesso;<time>
con l’attributo pubdate
può essere utilizzato per definire la data di pubblicazione dell’<article>
;<section>
e l’elemento <article>
non sono indipendenti ed esclusivi: possiamo avere sia un <article>
all interno di un <section>
che viceversa.<article> <header> <h1>Titolo articolo</h1> <time pubdate datetime="2011-10-09T14:28-08:00"></time></p> </header> <p>Contenuto dell'articolo</p> <footer> <p>Informazioni riguardo l'autore</p> </footer> </article>
In sostanza, anche se nelle specifiche non è espresso, l’elemento <article>
rappresenta una forma particolare di <section>
.
Nella lezione precedente abbiamo diviso i contenuti centrali del blog che stiamo costruendo in due <section>
. All’interno della prima <section>
possiamo trovare diversi tag <article>: il primo che incontriamo è l’articolo vero e proprio con tanto di <header>
contenente il titolo dell’articolo e la data di pubblicazione e <footer>
che all’interno di un <dl>
raccoglie i metadati riguardanti l’autore.
All’interno dell’<article>
padre sono annidati ulteriori <article>
contenenti i commenti all’articolo racchiusi in una <section>
che li rende semanticamente separati dal contenuto principale. Così come i commenti, anche il form che permette di inserire un’ulteriore commento è inserito all’interno di una <section>
. Possiamo quindi facilmente immaginare come il contenuto del nostro <article>
possa essere citato o ripubblicato in altri blog indipendentemente dai commenti che ha ricevuto.
Ecco quindi il codice dell’<article>
sopra descritto:
<section> <h1>L'ultimo post</h1><article> <header> <time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time> <h2>Nuove scoperte sul tag video!</h2> </header> <p> Attraverso un utilizzo sapiente del tag canvas è possibile leggere uno stream di dati proveniente da un tag video e <mark>manipolarlo in tempo reale</mark>. </p> <footer> <dl> <dt>autore: </dt> <dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address></dd> <dt>categoria: </dt> <dd><a href="categoria/multimedia">multimedia</a>,</dd> <dt>tags: </dt> <dd><a href="tags/video">video</a>,</dd> <dd><a href="tags/canvas">canvas</a>,</dd> <dt>permalink: </dt> <dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd> <dt>rank:</dt> <dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></dd> </dl> </footer> <section> <h3>Commenti</h3> <article> <h4> <time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time> Angelo Imbelli ha scritto: </h4> <p>C'è un bell'esempio sulla rete: effetto ambi-light!</p> <footer> <address><a href="mailto:ambelli@mbell.it">Angelo Imbelli</a></address> </footer> </article> <article> <h4> <time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time> Sandro Paganotti ha scritto: </h4> <p>Bellissimo! Grazie per la segnalazione!</p> <footer> <address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address> </footer> </article> <section> <h4>Inserisci un nuovo commento:</h4> <form> [ campi form per inserire un nuovo commento] </form> </section> </section> </article> </section>
Nel seguente schema abbiamo realizzato graficamente come si presenta il nostro articolo morfologicamente:
Figura 14 – Struttura del documento: suddivisione semantica degli articoli
C’è da notare che anche se il tag <article> rappresenta un elemento che viene considerato una sezione a sé stante dall’outliner e quindi un blocco con dei contenuti unici e un titolo univoco (quindi per ogni blocco avremmo potuto utilizzare un titolo racchiuso in un <h1>
), abbiamo preferito rispettare comunque l’ordine decrescente per i titoli in modo da rendere i contenuti accessibili anche agli screen reader che al momento non hanno ancora implementato l’algoritmo outliner.
Nella prossima lezione parleremo del tag <nav>
e della sua fondamentale importanza all’interno di una pagina in HTML5.
Nuovi tag semantici e strutturali | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<article> | 9.0+ | 3.0+ | 3.1+ | 5.0+ | 10.0+ |
inserisci la tua e-mail nel box qui sotto: