HTML and CSS Reference
that item. The name of the property is the value set for the itemprop attribute. The value
depends on what type of element the attribute is added to. If the element is an audio ,
embed , iframe , img , source , or video tag, then the value is set to the src of that tag.
If the element is an a , area , or link tag, then the value is set to the href of that tag. If
the element is a time tag, then the value is set to the datetime attribute of that tag. If the
element is a meta tag, then the value is set to the content attribute of that tag. Otherwise,
the value is set to the textContent of the tag. A brief example is shown here.
<time itemprop="gameday" datetime="2010-06-22"> June 22 </time>:
The <span itemprop="visitor"> Giants </span> at
<span itemprop="home"> A's </span> . <br>
<meta itemprop="city" content="Oakland">
If the item is set to one of the predefined types, then there is a specific set of values that is
allowed for the itemprop .
This attribute is set to indicate what additional elements should be traversed to look for
name/value pairs for the item. By default, only the children are searched. However,
sometimes it does not make sense to have a single parent item if the data is intermingled.
In this case, itemref can be set to a space-separated list of additional elements to traverse:
<div itemscope itemref="parentname parentfood"></div>
<div itemscope itemref="childname childfood"></div>
<span id="parentname"><span itemprop="name"> Thomas </span></span> has a
daughter named <span id="childname"><span itemprop="name"> Olivia </span>
Thomas' favorite food is <span id="parentfood"><span itemprop="food"> sushi
</span></span> and Olivia's is <span id="childfood"><span
itemprop="food"> French Fries </span> !
This attribute is used to set an element as an item of microdata (see Chapter 2 for more
information on microdata). An element with an itemscope attribute creates a new item that
contains a group of name/value pairs defined by enclosed elements with itemprop
attributes. For example,
<span itemprop="firstname"> Thomas </span>
<span itemprop="lastname"> Powell </span>
sets name/value pairs of firstname: Thomas and lastname: Powell for the item
declared in the <div> .