Explications
Tout comme les micro-formats, les micro-données permettent de stocker des méta-données dans une page web. Leur utilisation tend à remplacer celle des micro-formats, les micro-données étant inclues dans HTML5.
Plusieurs attributs sont à utiliser :
itemscope permet d'indiquer que la balise contient des données sémantiques
itemtype permet de définir le schéma utilisé, vous pouvez les retrouver sur le site : Schema.org
itemprop permet d'étiqueter un élément, c'est à dire, donner le nom de l'attribut
Exemple :
Example sans marquage
1
<div>2
<span>Julius Caesar at Shakespeare's Globe</span>
3
<span>Wed 01 October 2014 19:30</span>
4
</div>Exemple avec micro-données
1
<div itemscope="" itemtype="http://schema.org/TheaterEvent">
2
<span itemprop="name">Julius Caesar at Shakespeare's Globe</span>
3
<div itemprop="location" itemscope="" itemtype="http://schema.org/PerformingArtsTheater">
4
<meta itemprop="name" content="Shakespeare's Globe"/>
5
<link itemprop="sameAs" href="http://www.shakespearesglobe.com/"/>
6
<meta itemprop="address" content="London, UK"/>
7
</div>8
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
9
<link itemprop="url" href="/examples/ticket/0012301230123"/>
10
</div>11
<span itemprop="startDate" content="2014-10-01T19:30">Wed 01 October 2014 19:30</span>
12
<div itemprop="workPerformed" itemscope="" itemtype="http://schema.org/CreativeWork">
13
<link itemprop="sameAs" href="http://en.wikipedia.org/wiki/Julius_Caesar_(play)"/>
14
<link itemprop="sameAs" href="http://worldcat.org/entity/work/id/1807288036"/>
15
<div itemprop="creator" itemscope="" itemtype="http://schema.org/Person">
16
<meta itemprop="name" content="William Shakespeare"/>
17
<link itemprop="sameAs" href="http://en.wikipedia.org/wiki/William_Shakespeare"/>
18
</div>19
</div>20
</div>
