HTML Microdata

LECTURE#02
ENGR. MUBBASHIR AYUB
 Extending HTML5 — Microdata

Microdata is a standardized way to provide additional

semantics in your web pages.
Microdata lets you define your own customized
elements and start embedding custom properties in
your web pages. At a high level, microdata consists of a
group of name-value pairs.
The groups are called items, and each name-value pair
is a property. Items and properties are represented by
regular elements.
 It gives us a whole new way to add extra semantic
information and extend HTML5.
 Extending HTML5 — Microdata

itemscope — defines a group of name-value pair(s), called an item/ microdata item.

itemprop="property-name" — adds a property to a microdata item. The name of
the property can be a word or URL, and the value is the ‘content’ of the element
with this attribute:
 For most elements, the value is the element’s text content (not including any HTML tags)
 For elements with a URL attribute, the value is the URL (<img
src="">, <a href="">, <object data="">, etc.)
 For the <time> element, the value is the datetime="" attribute
 For <meta itemprop="" content="">, the value is the content="" attribute
itemref="" — allows a microdata item to include non-descendent properties by
referring to the ids of element(s) containing them
itemtype="" — defines the item’s type when used on the same element
as itemscope. The itemtype value is a URL that acts as an identifying vocabulary
name.
itemid="" — allows a vocabulary to define a global identifier for a microdata item,
for example an ISBN number on a book.
 Extending HTML5 — Microdata

itemscope and itemprop

<p itemscope>I’m going to the <span itemprop="name">
Salter Cane</span> gig next week. Excited!</p>
The presence of itemscope on the <p> element makes it
into a microdata item.
The attribute itemprop on a descendent element defines
a property of this item (in this case, name) and associates
it with the value Salter Cane (the <span>’s content). An
item must have at least one itemprop to be valid.
itemprop names can be words or URL strings.
Using URLs makes the name globally unique.
 Extending HTML5 — Microdata

itemprop value from an attribute

For some elements, an itemprop’s value comes from an
attribute of the element, not the element’s text. This applies to
values from attributes containing URLs, the datetime attribute,
and the contentattribute.
<p itemscope>I’m going to the <a itemprop="url"
href="http://www.saltercane.com/">Salter Cane</a> gig
<time itemprop="date" datetime="2010-07-18">next
week</time>. Excited!</p>
This defines an item with the properties url and date containing
the values http://www.saltercane.com/ and 2017-07-18,
respectively.
 Extending HTML5 — Microdata

Note that the link’s itemprop="url" value is

http://www.saltercane.com/ and not the element’s “Salter Cane” text
content. In microdata, the following elements contribute their URLs as
values:
 <a href="">
 <audio src="">
 <embed src="">
 <iframe src="">
 <img src="">
 <link href="">
 <object data="">
 <source src="">
 <video src="">
Similarly, the <time> element’s value is 2017-07-18 and not its text
content (i.e., “next week”).
 Extending HTML5 — Microdata

Conversely, the URL-containing attributes of

these HTML5 elements are not used as property
values:
<base href="">
<script src="">
<input src="">
 Extending HTML5 — Microdata

It's still possible to use the text of one of these elements

as its value — e.g., <a href="">desired value</a>. We
just need to add an additional itemprop:
<p itemscope>I’m going to the <a
itemprop="url"href="http://www.saltercane.com/"><s
pan itemprop="name">Salter Cane</span></a> gig
<time itemprop="date" datetime="2017-07-18">next
week</time>. They’re gonna rawk!</p>
This defines an item with three properties: the url is
http://www.saltercane.com/, the name is Salter Cane,
and the date is 2017-07-18.
 Extending HTML5 — Microdata

Nested items
We can make a property into a nested item by adding itemscope to an
element with itemprop.
<p itemscope>The <span itemprop="name">Salter
Cane</span> drummer is <span itemprop="members"
itemscope><span itemprop="name">Jamie
Freeman</span>.</span></p>
This defines an item with two properties, name and members. The
name is Salter Cane, and the members is a nested item, containing the
property name with the value Jamie Freeman. Note that members doesn’t
have a text value.
Items that aren’t part of other items (i.e., anything with itemscope but
not itemprop, or the child of an element with itemprop) are called top-level
microdata items. The microdata API returns top-level microdata items and
their properties, which includes nested items.
 Extending HTML5 — Microdata

Multiple properties
Items can have multiple properties with the same name and different values:
<span itemprop="members" itemscope>The band members are
<span itemprop="name">Chris Askew</span>,
<span itemprop="name">Jeremy Keith</span>,
<span itemprop="name">Jessica Spengler</span> and
<span itemprop="name">Jamie Freeman</span>.</span>
This defines the property name with four values, Chris Askew,
Jeremy Keith, Jessica Spengler and Jamie Freeman.
One element can also have multiple properties multiple itemprop=""names
separated by spaces) with the same value:
<p itemscope><span itemprop="guitar vocals">Chris Askew</span>
is so dreamy.</p>
This defines the properties guitar and vocals, both of which have the
value Chris Askew.
 Extending HTML5 — Microdata

In-page references via itemref

Items can use non-descendant properties (name-
value pairs that aren’t children of
the itemscope element) via the attribute itemref="".
This attribute is a list of the IDs of properties or
nested items elsewhere on the page.
 Extending HTML5 — Microdata

In-page references via itemref

<p itemscope itemref="band-members">I’m going to the
<a itemprop="url" href="http://www.saltercane.com/">
<span itemprop="name">Salter Cane</span></a> gig
<time itemprop="date" datetime="2010-07-18">next
week</time>. Excited!</p>
…
<p>Salter Cane are <span id="band-members"
itemprop="members" itemscope>
<span itemprop="name">Chris Askew</span>,
<span itemprop="name">Jeremy Keith</span>,
<span itemprop="name">Jessica Spengler</span>
and <span itemprop="name">Jamie Freeman</span>.</span></p>
This defines the properties url, name, and date. Additionally, it references the
ID band-members, which contains the item members with four name properties,
each of which have a different value.
 Extending HTML5 — Microdata

Using <meta> to add content via attributes

If the text you want to add isn’t already part of the
page’s content, you can use the content attribute on
the <meta> element (<meta itemprop="" content="">)
to add it.
<p itemscope><span itemprop="name"
itemscope>Jessica Spengler <meta itemprop="likes"
content=“Toshiba"></span>’s fans are always really
harsh loud noise.</p>
Here a nested property likes is defined with the value
Toshiba.
 Extending HTML5 — Microdata

Unfortunately, some current browsers

move <meta> elements into the document's <head>.
The elegant workaround is to use an in-page reference
via itemref, so it’ll be included by tools that understand
microdata even if the browser has moved it.
<p itemscope><span itemprop="name" itemscope
itemref="meta-likes"> Jessica Spengler<meta id="meta-
likes"itemprop="likes" Content=“Toshiba">
</span>’s fans are always really harsh loud noise.</p>
Both of these code snippets define the property name with the
value Jessica Spengler and the nested property likes with the
value Toshiba.
 Extending HTML5 — Microdata

Typed items (itemtype) and globally unique names

We can tie an item to a microdata vocabulary by giving it a type, specified via the
attribute itemtype="" on an element with itemscope.
The itemtype="" value is a URL representing the microdata vocabulary. Note that
this URL is only a text string that acts as unique vocabulary identifier — it doesn’t
actually need to link to an actual webpage (although it’s nice when it does).
After doing this, we can use names in the vocabulary as itemprop names to apply
vocabulary-defined semantics.
<p itemscope itemtype="http://schema.org/MusicGroup"> I went to
hear <a itemprop="url" href="http://saltercane.com/"><span
itemprop="name"> Salter Cane</span></a> last night. They were great!</p>
This example defines the property url with the value http://saltercane.com/ and
the property name with the value Salter Cane according to
the http://schema.org/MusicGroup vocabulary (MusicGroup is a
specialized kind of Organization vocabulary on schema.org).
 Extending HTML5 — Microdata

Global identifiers with itemid

Sometimes an item may be identified by a unique identifier, such as a
book by its ISBN number. This can be done in microdata using a global
identifier via the attribute itemid="". itemid can only appear on an
element with both itemscope and itemtype="", and must be a valid
URL.
<p itemscope itemtype="http://vocab.example.com/book"
itemid="uri:isbn:0321687299">
<!-- book info… -->
</p>
This defines an item containing information about a book identified by
the ISBN number 0321687299, as long
as thehttp://vocab.example.com/book vocabulary defines global
identifiers like this.
 Extending HTML5 — Microdata

Microdata in action
So now that we know how, why we want to use microdata?
One use is adding extra semantics or data that we can manipulate via
JavaScript.
 But if we use a vocabulary via itemtype or URL- based itemprop names,
microdata becomes considerably more complex and powerful.
While microdata is machine-readable without needing to know the
vocabulary, using a vocabulary means others can know what our
properties mean.
Well, in effect, using a vocabulary makes microdata a
lightweight API for your content.
If you visited someone’s homepage, wouldn’t it be great if you could add
their contact information to your address book automatically?
 Extending HTML5 — Microdata

Using Google’s Rich Snippets vocabularies

Google also has some basic vocabularies for the following kinds
of data.
 people
 businesses and organizations

 events

 products

 reviews

 recipes

These vocabularies also support microformats and RDF, two

other ways to add extra semantics to our content, in addition to
microdata.
 Extending HTML5 — Microdata

Tools for making and using microdata

With the right tools, we could use this data complete with its explicit semantics to, for example, add
a microdata-annotated event directly into a calendar — very handy if you were planning to attend.
With the release of schema.org, tools for microdata are starting to appear, but are still somewhat
thin on the ground.
If you’d like a simple way to create microdata, with schema.org there are now several web-based
form options:
Schema Creator supports the schema.org vocabularies for Person, Product, Event, Organization,
Movie, Book, and Review
Schemafied supports the schema.org vocabularies for aggregate rating, article, contact point,
creative work, event, local business, media object, nutrition information, offer, organization,
person, place, postal address, product, rating, recipe, and thing, and also includes relevant items
from other schemas
Microdata Generator supports the schema.org vocabularies for Attorney, Auto Dealer, Dentist,
HVAC, Local Business Schema (NAP), Locksmith, Physician, Plumber, Real Estate, and Restaurant
HTML5 Microdata Templates supports the WHATWG and Rich Snippets vocabularies for events,
organisations, people, reviews, and content
 Extending HTML5 — Microdata

Making your own vocabulary

If you don’t see a suitable vocabulary, you could make your
own. The microdata vocabularies in the HTML5 spec are
included as examples of how to do it. Basically:
Work out your vocabulary’s rules. This is a little like
setting up a database — work out names for each type of data,
then think what kind of data each name’s value should/must
contain (URL, datetime, free text, text with restrictions…), and
whether something needs to be the child of something else.
Make up a URL on a domain you control, and ideally put
your vocabulary specification there.
Use the URL in itemtype="" to reference your vocabulary.
Reference
http://html5doctor.com/microdata/
http://schema.org
Assignment#01: Create your own library for a
student class.

• THE End