Page 131 - Guida tascabile HTML5

A questo punto è necessario identificare le singole informazioni, andando a

valorizzare i tag HTML utilizzando l’attributo itemprop:

<h1 itemprop="name">Antonio Sant'Elia (1888-1916): il futuro delle città</h1>

In questo caso il contenuto testuale del tag <h1> assume in modo esplicito il
valore di nome (name) dell’evento.

Allo stesso modo è possibile identificare il luogo (location) in cui si terrà la

mostra:

<p itemprop="location">Triennale di Milano</p>

A volte può essere necessario, per facilitare l’identificazione delle

informazioni, intervenire sulla struttura dei tag. Per esempio il paragrafo <p>25 Nov
2016 - 8 Gen 2017</p> deve essere suddiviso in porzioni, per poter marcare in

modo indipendente data di apertura e data di chiusura della mostra:

<p><time itemprop="startDate" datetime="2016-11-25">25 Nov 2016 </time> - <time
itemprop="endDate" datetime="2017-01-08">8 Gen 2017</time></p>
Come vedete le informazioni sono comunicate in modo più articolato. Per prima

cosa è fondamentale impiegare i tag HTML corretti per il contenuto da marcare:

una data è associata al tag <time> e solo a questo punto con l’attributo itemprop
vengono identificati i diversi dettagli.

Ecco qui di seguito l’intera porzione di codice con i Microdata più salienti (gli
spazi tra le righe sono stati aggiunti per maggiore chiarezza):

<div itemscope itemtype="http://schema.org/ExhibitionEvent">
<h1 itemprop="name">Antonio Sant'Elia (1888-1916): il futuro delle città</h1>
<p itemprop="location">Triennale di Milano</p>
<p><time itemprop="startDate" datetime="2016-11-25">25 Nov 2016</time> - <time
itemprop="endDate" datetime="2017-01-08">8 Gen 2017</time></p>
<img itemprop="image" src="locandina.jpg" alt="locandina">
<p itemprop="description">In occasione del centenario della morte di Antonio
Sant'Elia, una mostra celebra l'autore del Manifesto dell'Architettura Futurista.
</p>
<a href="http://www.triennale.org/mostra/antonio-santelia-1888-1916-il-futuro-
delle-citta/" itemprop="url" title="Vai alla pagina della mostra">Scheda
completa</a>
</div>
In questo modo ogni tag è stato arricchito: il contenuto percepito dall’utente non

è stato modificato, ma i metadati sono molto più significativi.

NOTA Per la maggior parte dei tag il valore della proprietà sarà il contenuto testuale
del tag stesso. Esistono però delle eccezioni, che rendono più immediata
l’associazione delle informazioni significative:

nel caso degli elementi multimediali (<img>, <audio> o <video>), degli elementi
ad essi collegati (<source>, <track>, <embed>) e di <iframe>, il valore della