Webmaster Tools

Here is the same HTML code marked up with microdata:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  My name is <span itemprop="name">Bob Smith</span>, 
  but people call me <span itemprop="nickname">Smithy</span>.
  Here is my homepage: 
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
  I live in 
  <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">Albuquerque</span>, 
    <span itemprop="region">NM</span> 
  </span>
  and work as an <span itemprop="title">engineer</span>
  at <span itemprop="affiliation">ACME Corp</span>.
  My friends:
  <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>, 
  <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Here's how this sample works:

• On the first line, <itemscope itemtype="http://www.data-vocabulary.org/Person"> indicates that the HTML enclosed in the <div> represents a Person. itemscope indicates that the content of the <div> describes an item, and itemtype="http://www.data-vocabulary.org/Person" indicates that the item is a Person. person can be used to represent microformats vcard.
• The sample describes properties of the person, such as his name, nickname, and job title. To label person properties, each element containing one of these properties (such as <div> or <span>) is assigned an itemprop attribute indicating a property. For example, <span itemprop="nickname">.
• A property can consist of another item (in other words, an item can include other items). For example, the person information above includes an Address (itemtype="http://www.data-vocabulary.org/Address") with the properties locality and region.
• The XFN rel="friend" property identifies Bob's relationship with Darryl and Edna.

Here is the same HTML content marked up with the hCard microformat.

<div class="vcard">
   My name is
   <span class="fn">Bob Smith</span>,
   but people call me
   <span class="nickname">Smithy</span>.
   Here is my home page:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   I live in
   <span class="adr">
      <span class="locality">Albuquerque</span>,
      <span class="region">NM</span>
   </span>
   and work as an
   <span class="title">engineer</span> at
   <span class="org">ACME Corp</span>.
   My friends:
   <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Here's how the sample works.

• In the first line, class="vcard" indicates that the HTML enclosed in the <div> describes contact information, in this case contact information for a Person.

  (The microformat used to describe contact information is called hCard and is referred to in HTML as vcard. This isn't a typo.)

• The sample describes properties of the Person item, such as a photo, name, title, organization, and address. To label properties about the person described by the vcard, each element containing one of these properties (such as <span> or <div>) is assigned a class attribute indicating a property. The vcard describes Bob's name (fn), his job title (title), and the organization he works for (org).
• Properties can contain other properties. In the example above, the property adr describes the address of the person, and includes the subproperties locality, and region).
• The XFN rel="friend" property identifies Bob's relationship with Darryl and Edna.

Here is the same HTML content marked up with RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
   My name is <span property="v:name">Bob Smith</span>,
   but people call me <span property="v:nickname">Smithy</span>.
   Here is my homepage:
   <a href="http://www.example.com" rel="v:url">www.example.com</a>.
   I live in
   <span rel="v:address">
      <span typeof="v:Address">
         <span property="v:locality">Albuquerque</span>,
         <span property="v:region">NM</span>
      </span>
   </span>
   and work as an <span property="v:title">engineer</span>
   at <span property="v:affiliation">ACME Corp</span>.
   My friends:
   <a href="http://darryl-blog.example.com" rel="v:friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="v:friend">Edna</a>
</div>

Here's how the sample works.

• The example begins with a namespace declaration using xmlns. This indicates the namespace where the vocabulary (a list of entities and their components) is specified. You can use the xmlns:v="http://rdf.data-vocabulary.org/#" namespace declaration any time you are marking up pages for people, review, or place data. Be sure to use a trailing slash and # (xmlns:v="http://rdf.data-vocabulary.org/#").
• Also on the first line, typeof="v:Person" indicates that the marked-up content represents a Person.
• Each property of the Person (such as their name or nickname) is labeled using property. The property name is prefixed with v: (<span property="v:nickname">).
• We want to include Bob's address information (typeof="v:Address") in the typeof="v:Person" entity. Here, we use rel instead of property to indicate a relationship between Bob (the entity v:Person) and this address (the entity v:Address). Then, we include <span typeof="v:Address"> to include the actual address entity.
• The XFN rel="friend" property identifies Bob's relationship with Darryl and Edna.