264 Chapter 11—Microdata
where prop means properties. If we want to mark all musicians in the text as
musicians, we therefore require four itemprop attributes, which we insert in
a suitable place. If no suitable elements are readily available, we first need to
create them as a span or div element. So “Pat Metheny” becomes “<span>Pat
Metheny</span>” in the HTML code, an addition that does not affect the text
layout and allows us to specify an itemprop attribute for the span element. Un-
like itemscope, itemprop is not a boolean attribute, but defines the name of the
corresponding property via its attribute value:<article itemscope>
... <span itemprop=musician>Pat Metheny</span> steps onto the stage ...
... <span itemprop=musician>Antonio Sanchez</span> on the drums ...
... <span itemprop=musician>Steve Rodby</span> on the bass ...
... <span itemprop=musician>Lyle Mays</span> on the piano ...
</article>Our first microdata example is now complete, and the question arises as to how
this metadata could be interpreted by a search engine spider that indexes the
blog entry. Philip Jägenstedt’s Live Microdata viewer, from now on referred to
as microdata viewer, helps us visualize the data structure. This is an online ap-
plication where we can copy code fragments with microdata content into a text
field, making hidden microdata visible in JSON notation. You should probably
save the link http://foolip.org/microdatajs/live as a bookmark: You will need it
for testing all code examples.To avoid having to painstakingly retype the example texts, all HTML code
fragments in this chapter are available as a plain text file online so they can
easily be copied into the microdata viewer. The individual fragments are listed in
the same order as they appear in the chapter. The link to the file is http://html5.
komplett.cc/code/chap_microdata/fragments_en.txt.If we copy the second HTML fragment from the file fragments_en.txt into Philip
Jägenstedt’s microdata viewer, the JSON notation shows the following structure:{
"items":[{
"properties":{
"musician":["Pat Metheny",
"Antonio Sanchez",
"Steve Rodby",
"Lyle Mays"
]
}
}
]
}TIP