A simple guide on how to use Microdata semantic annotations on your own HTML5 markup. An easy survey on what Microdata is and how can you use it to increase the visibility of your web pages.

1. Microdata
for
Dummies
Use Semantic Annotations
in Web Pages

2. Why to use Semantic Annotations?
• to annotate HTML content with specific machinereadable labels
• to allow generic scripts to provide custom services to
the page
• to enable content from many sources to be
processed by a single script in a consistent manner.

3. “specific machine-readable labels”?
• Indeed you have to use „labels“ from a specific
vocabulary, e.g. Schema.org
• Schema.org is endorsed by Google, Bing and Yahoo!
• This presentation does not discuss Schema.org
vocabulary but use it
• Check http://getschema.org for many other
examples.

4. How to use these „labels“? (1)
<h1>Pita Pizza</h1>
<p>By Mindy Pretner</p>
Pita Pizza is a quick snack or meal that can be customized to your liking!
<h2>1 Serving Piece</h2>
<p> Prep Time: 5 Min<br/> Cook Time: 15 Min<br/> Ready In: 20 Min</p>
<h3> Ingredients</h3>
<ul>
<li>1 pita bread round</li>
<li>5 ml olive oil</li>
<li>45 ml pizza sauce</li>
<li>55 g shredded mozzarella cheese</li>
<li>25 g sliced crimini mushrooms</li>
<li>0.7 g garlic salt</li>
</ul>
<h3> How to do it</h3>
<ol>
<li>Preheat grill for medium-high heat.</li>
<li>Spread one side of the pita with olive oil and pizza sauce. Top with cheese and mushrooms, and season with
garlic salt.</li>
<li>Lightly oil grill grate. Place pita pizza on grill, cover, and cook until cheese completely melts, about 5
minutes.</li>
</ol>
<h3> Nutritional Information </h3>
<p> <strong>Amount Per Serving</strong>
Calories: 405 | Total Fat: 18g | Cholesterol: 44mg
</p>
This is my
HTML, what should
I do now?
Well, you have to
tell Google that you
published a Recipe

5. I want to publish a recipe
<div itemscope itemtype="http://schema.org/Recipe">
<h1>Pita Pizza</h1>
…
</div>
 Use a container element (such as <div>) to
describe that all enclosed content is about the same
thing
 itemscope? itemtype? – indeed, they are some
new attributes you need to use... This is
Microdata.
 What about http://schema.org/Recipe ?
 This is the thing your content is about :)

6. Microdata (1) – what it is?
• Microdata is a collection of HTML5 attributes helping
us to describe items (such as a Recipe) and their
properties (such as cooking time)
• An item is a group of property-value pairs (Oh, that‘s
why I need a container. Before I just defined a
Recipe item...)
• To create an item you MUST use the itemscope
attribute
• Each item should have a type defined with the
itemtype attribute

7. Microdata (2) – itemscope, itemtype
• Usually HTML attributes have a value.. . What about this
itemscope ?
• Well, in HTML5 attributes no longer require a value.
Therefore use itemscope without any value.
• How to I know the value of the itemtype attribute?
• This value is a special name (technically called URI –
Uniform Resource Identifier ) which identifies and
uniformly what is about your content.
• The value http://schema.org/Recipe is defined by
Schema.org vocabulary. This is the vocabulary
processed by Google, Bing and Yahoo!. Check
http://getschema.org for examples.
• itemtype MUST come always together with itemscope

8. Microdata (3) - property-value pair
What? I did this
in my HTML ...
• What about these „property-value pairs“ ?
• Suppose you want to describe that your
recipe is for 1 serving...
Well, you have just a plain text
difficult to be processed by
machines... They would need
to understand the human
language, even ALL languages
in the world...

9. Microdata (4) - itemprop
• Use a property-value pair to describe this
• Microdata has the itemprop attribute What should I do better?
(„item property“)
<div>
<span itemprop="recipeYield">1</span>
Serving
</div>
 I‘ve got it! The property is recipeYield
 and the value is "1"
 So we have a property-value pair

10. Microdata (5) - more about itemprop
• An itemprop can also introduce multiple
properties at once, to avoid duplication when
that properties have the same value.
<p itemprop="author creator" itemscope
itemtype="http://schema.org/Person">
By <a itemprop="url"
href="http://fourstarcooks.org/mindypretner">
<span
</a>
</p>
itemprop="name">Mindy Pretner</span>

11. More about values
• Properties generally have values that are strings, but
in many cases there are values that are URLs (such as
the image of my pita pizza) , then the value of such
property will be taken from the attribute that express
it (such as src attribute of <img>)
<div itemscope itemtype="http://schema.org/Recipe">
<h1 itemprop="name">Pita Pizza</h1>
<img itemprop="image"
src="http://myrecipes.com/images/pitapizza.png"
alt="Pita Pizza"/>
…
</div>

12. There are many ways to markup (1)
<p itemprop="author" itemscope
itemtype="http://schema.org/Person">
By <a itemprop="url"
href="http://fourstarcooks.org/mindypretner">
<span itemprop="name">Mindy Pretner</span>
</a>
</p>
<p itemprop="author">
<div itemscope
By <a
itemtype="http://schema.org/Person">
itemprop="url"
href="http://fourstarcooks.org/mindypretner">
<span
</a>
</div>
</p>
itemprop="name">Mindy Pretner</span>

13. There are many ways to markup (2)
<p itemprop="author"
itemscope itemtype="http://schema.org/Person">
By
<span itemprop="name">
<a itemprop="url"
href="http://fourstarcooks.org/mindypretner">
Mindy Pretner
</a>
</span>
</p>

14. Can the machine understand "20
Min"?
• Indeed, this is a long story... Some text is more easy to be
understood some other very difficult
• The total time of my recipe is 20 min...
• therefore, sometimes, we need to separate the
human readable content (20 Min) from the
machine readable one (P20M)...
<div itemscope itemtype="http://schema.org/Recipe">
...
Ready In:
<time itemprop="totalTime" datetime="P20M">
20 Min
</time>
...
</div>

15. How to describe collections?
<ul>
<li itemprop="ingredient">1 pita bread
round</li>
<li itemprop="ingredient">5 ml olive oil</li>
…
</ul>
 A property may appear many times
 What about "5 ml"... This is a quantity. Is any
way to describe it better?
 Well, there are some solutions but, if you are a
beginner, just do as above

16. Properties have "expected values"
• Schema.org properties have expected values.
• What is an "expected value"?
• Let's say it is the best value you can put for your
property
• Remember the duration of of your recipe?
• The property totalTime has a Duration as expected
value
• A Duration is a precise string using ISO 8601
duration format
• When such a format is not provided the machine
may fail to understand the value

17. Referring items
• How I can refer an item which is not in the same
container?
• You have to uss a combination between HTML attribute id
and attribute itemref sharing the SAME value
• Then you can still annotate when the data to be
annotated does not follow the convenient tree structure...
<div itemprop="author" id="x">
<div itemscope itemtype="http://schema.org/Person>
<p itemprop="author">Friedrich Hayek</p>
</div>
</div>
<div itemscope itemtype="http://schema.org/Book" itemref="x">
<p itemprop="title">The Road to Serfdom</p>
</div>

18. Vocabularies define types
• How do I know what type (itemtype) to use?
• Microdata do NOT define these types and their
properties
• Types and properties are part of Web
vocabularies, e.g., Schema.org
• Example of types:
o http://schema.org/Recipe
o http://schema.org/Book
• Each type defines its own properties and inherits
properties from its super types e.g.,
• http://schema.org/CreativeWork is a supertype (or
parent/ancestor type) of http://schema.org/Diet
therefore Diet inherits all CreativeWork properties
• Diet is a subtype of CreativeWork

19. Which vocabulary should I use?
• Fact is that, according with the semantics you want
to encode there are plenty of Web vocabularies:
FOAF, SKOS, DOAP, ...
• However, these types and properties should be
understood by Web applications...
• Therefore when you use e.g., SKOS then ONLY
applications that process SKOS will interact with
your page
• Remember, Google, Bing and Yahoo! Allied to
process a common vocabulary, Schema.org
See examples at
http://getschema.org

20. Happy?
• Visit http://getschema.org to learn more
• Request an account if you like to contribute
• Follow us