HTML and CSS Reference
In-Depth Information
<p itemprop="address" itemscope itemtype="">
<span itemprop="addressLocality">Cambridge</span>,
<span itemprop="addressRegion">MA</span>
<a itemprop="url" href="">Website at
The start of this microdata item is again indicated by the use of itemscope on the
section element, but also added to this element is the itemtype attribute. Use item
type with a URL in order to identify the item data type. In this case, we're using the structure to identify a person.
As in the previous recipe, the itemprop attribute is applied with property names to give
meaning to the content in the markup. By looking at the properties and pairing them
with the content, we can tell that “Tim Berners-Lee” is a person's name and that this
person's job title is “Director.”
The use of itemprop for both the image and URL properties works a bit differently: the
corresponding values in these cases are the src and href attribute values, respectively.
If you've worked with microformats in the past, this concept won't be new to you.
A final special case in this example can be seen with the affiliation and address item
prop attributes. Here, new items are nested inside of the main item. In both cases, the
itemprop not only identifies the property that is directly related to the person item but,
within the same tag, also establishes the property as an item itself with the itemscope
attribute. Going one step further, itemtype is also applied to indicate the URL that
describes the item data type.
While this might seem a bit complicated at first, it's not much different from combining
multiple microformats (like hCard and hCalendar on a resume) or creating an XML
object to represent nested data.
Whether you've worked on projects like this before or not, there is an easy way to check
to see that you're making progress in applying the vocabularies: you can
use the Google Rich Snippets Testing Tool (available at
masters/tools/richsnippets ) to validate that your structured data markup can be parsed,
as shown in Figure 6-1 .
Before Google, Microsoft, and Yahoo! created, Google was
promoting Rich Snippets based on its own vocabulary at http://data-vo . Google's documentation for Rich Snippets is still live, but
every page features a link to
Search WWH ::

Custom Search