HTML and CSS Reference
In-Depth Information
<div itemscope itemtype=”http://schema.org/Book”>
I love that Introducing HTML5 by Bruce Lawson and Remy Sharp
¬ (ISBN 0321784421)
</div>
Using
itemprop
I can assign properties to the content:
<div itemscope itemtype=”http://schema.org/Book”>
I love that <span itemprop=”name”>Introducing HTML5</span>
by <span itemprop=”author”> Bruce Lawson</span> and
<span itemprop=”author”>Remy Sharp</span>
(ISBN <span itemprop=”isbn”>0321784421</span>)
</div>
Notice I've used the properties
name
for the book title,
isbn
for
the ISBN, and
author
twice, for Bruce and that other guy.
The actual value that gets assigned to itemprop depends
on the element it's on. It's generally the text content of the
element, except:
•
If the element also has an
itemscope
attribute, the value is
the item created by the element.
•
If the element is a
<meta>
element, the value is the value of
the element's
content
attribute.
•
If the element is an
<audio>
,
<embed>
,
<iframe>
,
<img>
,
<source>
,
<track>
, or
<video>
element, the value is the
element's
src
attribute, resolved to an absolute URL.
•
If the element is an
<a>
,
<area>
, or
<link>
element, the value
is the element's
src
attribute, resolved to an absolute URL.
•
If the element is an
<object>
element, the value is the ele-
ment's
data
attribute, resolved to an absolute URL.
•
If the element is a
<time>
element with a
datetime
attribute,
the value is the value of the element's
datetime
attribute.
Microdata items can be nested, so I could give details for the
authors using vCard. On the span containing the author name,
we give it an itemprop of author, as that's its relationship to the
book vocabulary, and we define the span as being a container
“about” an individual, so give it an itemscope and an itemtype
pointing at the hCard vocabulary:
