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).
