HTML and CSS Reference
In-Depth Information
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.
<div itemscope>
<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">
</div>
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
.
itemref
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>
</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>
!
itemscope
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,
<div itemscope>
<span itemprop="firstname">
Thomas
</span>
<span itemprop="lastname">
Powell
</span>
</div>
sets name/value pairs of
firstname: Thomas
and
lastname: Powell
for the item
declared in the
<div>
.
