What are semantic annotations? How to add them to web pages? Why add them?

1. Microdata
for
Dummies
Use Semantic Annotations
in Web Pages

2. Why to use Semantic Annotations?
• to annotate HTML content with specific machine-readable
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>
This is my HTML,
Pita Pizza is a quick snack or meal that can be customized to your liking!
what should I do
<h2>1 Serving Piece</h2>
<p> Prep Time: 5 Min<br/> Cook Time: 15 Min<br/> Ready In: 20 Min</now?
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>
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 about these „property-value pairs“ ?
• Suppose you want to describe that your recipe
is for 1 serving...
What? I did this
in my HTML ...
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. <div>
<span itemprop="recipeYield">1</span>
Serving
</div>
Microdata (4) - itemprop
• Use a property-value pair to describe this
• Microdata has the itemprop attribute („item
property“)
What should I do better?
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 itemprop="name">Mindy Pretner</span>
</a>
</p>

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 itemtype="http://schema.org/Person">
By <a itemprop="url"
href="http://fourstarcooks.org/mindypretner">
<span itemprop="name">Mindy Pretner</span>
</a>
</div>
</p>

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