Article

Funzioni e dati tecnici

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:

1. quando gli elementi <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>;
2. le informazioni relative all'autore dell'<article> non devono essere replicate all'interno degli elementi nidificati all'interno dello stesso;
3. l'elemento <time> con l'attributo pubdate può essere utilizzato per definire la data di pubblicazione dell'<article>;
4. l'elemento <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>.

Article: esempi concreti

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:

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.

Tabella del supporto sui browser

Nuovi tag semantici e strutturali
<article>	9.0+	3.0+	3.1+	5.0+	10.0+