HTML and CSS Reference
In-Depth Information
Solution
Use the
itemscope
and
itemprop
attributes, along with descriptive property names, to
label your content:
<p
itemscope
>
<span
itemprop="inventor"
>Tim Berners-Lee</span> created the
<span
itemprop="invention"
>World Wide Web</span>.
</p>
Discussion
The
itemscope
attribute is used to identify the scope of the microdata item—an
item
being a set of name/value pairs. The
itemprop
attribute values define the property names
and their associated values—in this case, the contents of the
span
tags. Thus, this
example yields the following name/value pairs:
• Inventor: Tim Berners-Lee
• Invention: World Wide Web
This is a very basic example. In the next recipe, we'll look at an example that implements
a standardized vocabulary.
See Also
6.2 Using Microdata and Schema.org
Problem
You want to convey additional meaning about your content—for example, that the
content identifies a person—so that popular search engines can extrapolate this data.
Solution
In addition to using the
itemscope
and
itemprop
attributes, specify an
itemtype
and
apply the appropriate property names from the
Schema.org
vocabulary:
<section itemscope
itemtype="http://schema.org/Person"
>
<h1 itemprop="name">Tim Berners-Lee</h1>
<img itemprop="image"
src="http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg">
<p>
<span itemprop="jobTitle">Director</span>,
<span itemprop="affiliation" itemscope
itemtype="http://schema.org/Organization" itemprop="name">World Wide
Web Consortium</span>
</p>