back to top

Microdata HTML5 – i fondamenti

L’altro underdog di HTML5 si chiama microdata; l’idea è quella di estendere HTML aggiungendo un vocabolario personalizzato per le nostre pagine.

Il vocabolario è in buona sostanza un insieme (Item) di proprietà nella forma di una mappa chiave-valore.

Trovate il working draft dedicato qui.

itemscope ed itemprop

La creazione di un item passa dall’uso di un attributo itemscope. Per aggiungere una proprietà all’item creato è necessario ricorrere all’attributo itemprop su di uno dei discendenti dell’item.

Alcuni esempi minimali mutuati dal draft:

<div itemscope>
  <p>Mi chiamo <span itemprop="name">Riccardo</span>.</p>
</div>

per le immagini e le URL si utilizzano gli attributi src e href rispettivamente:

<div itemscope>
  <img itemprop="image" src="lisbona.png" alt="Lisbona">
</div>

per valori non human-readable come codici o UID viene utilizzato l’attributo value del tag data:

<h1 itemscope>
  <data itemprop="user-id" value="132455677U">User ID</data>
</h1>

per le date è opportuno utilizzare time ed il relativo attributo:

<div itemscope>
Sono nato il <time itemprop="natoil" datetime="1980-04-23">4 Aprile 1980</time>.
</div>

Le proprietà possono a loro volta essere itemscope per altre proprietà:

<div itemscope>
  <p>Nome: <span itemprop="nome">Riccardo</span></p>
  <p>Artista preferito: <span itemprop="artista" itemscope> <span itemprop="nome">Jeff Buckley</span></span></p>
</div>

Qui artista è property e comtemporaneamente item con una property "nome".

Le proprietà possono anche non essere discendenti dell’item cui si riferiscono a patto di utilizzare itemhref per indicare la relazione:

<div itemscope itemhref="p_nome b_artista"></div>
<p id="p_nome">Nome: <span itemprop="nome">Riccardo</span></p>
<p id="b_artista">Artista preferito: 
  <span itemprop="artista" itemscope> 
    <span itemprop="nome">Jeff Buckley</span>
  </span>
</p>

L’esempio è perfettamente equivalente al precedente.

È possibile per un item avere property con nome uguale e valori diversi.

Properties con lo stesso valore possono essere raggruppate:

<div itemscope>
  <span itemprop="frutto-preferito sport-preferito">Pesca</span>
</div>

itemtype

Per definire un contesto per le properties è opportuno indicare un itemtype, in modo da fornirne una chiave di lettura più precisa. Gli itemtype devono essere URL:

<div itemscope itemtype="http://esempi.it/navi">
  <p>La <span itemprop="classe">Nimitz</span> è una tipologia di navi militari che comprende alcune portaerei nucleari.</p>
</div>

<div itemscope itemtype="http://esempi.it/professori">
  <p>Il prof. Massimo Di Noia insegna in <span itemprop="classe">5a</span> sezione C</p>
</div>

Nell’esempio l’itemtype definisce il valore semantico della property per i due itemscope, stesso nome per la proprietà, significati molto diversi.

Identicatori globali

Alcuni item possono fornire informazioni ralative da un identificatore globale: un itemid, che deve essere un URL. La specifica porta come esempio quello dell’ isbn (International Standard Book Number) di un libro:

<dl itemscope itemtype="http://esempi.it/libri" itemid="urn:isbn:0-111-12345-1">
  <dt>Titolo
  <dd itemprop="titolo">Guida ad HTML5
  <dt>Autore
  <dd itemprop="autore">Riccardo Brambilla
  <dt>Pubblicato il
  <dd><time itemprop="data_pubblicazione" datetime="2012-08-30">30 Agosto 2012</time>
</dl>

Gli autori sono incoraggiati ad utilizzare gli itemtype in modo da rendere le properties globali o in alternativa a dare alle stesse properties nomi univocamente identificativi (utilizzando URLs).

Pubblicità
Articolo precedente
Articolo successivo

In questa guida...