HTML and CSS Reference
In-Depth Information
Expressing more than just document semantics with microdata
Microdata
extends the expressive power of
HTML
to cover things that
aren't strictly markup. You can use microdata to designate a portion of
your page as describing contact information, a calendar event, or
licensing information.
Microdata uses three global attributes:
item
,
itemtype
, and
itemprop
. All
three can be seen in action in this short example that describes contact
information:
<section id="rob" itemscope
itemtype="http://microformats.org/profile/hcard">
<h1 itemprop="fn">Rob Crowther</h1>
<p itemprop="n" itemscope>Full name:
<span itemprop="given-name">Robert</span>
<span itemprop="additional-name">John</span>
<span itemprop="family-name">Crowther</span>
</p>
<p itemprop="org" itemscope>
<span itemprop="organization-name">Manning Publications Co.</span>
(<span itemprop="organization-unit">Hello! Series</span>)
</p>
</section>
This code, because of the
itemtype
attribute on the parent element ref-
erencing the hCard vocabulary, describes a person—me! The
itemprop
attributes are extracted as a set of name-value pairs into a tree-like data
structure following the markup, like this:
