hCard Microformat Example

02/13/2008

What exactly is an hCard? It’s a format which specifies that some information on a web page is an online business card. The address for Lumidant in the page footer is an hCard. This means when someone with the Operator Firefox extension visits this page they will have the opportunity to do a one-click import of Lumidant’s address and URL into their contact book. And that can’t hurt business. Come Firefox 3, this functionality will be available without extensions. Creating an hCard was pretty simple. All I had to do was add specific class names to my HTML elements:

<div id="address" class="vcard">
  <a class="fn org url" href="http://www.lumidant.com" title="Lumidant | Cleveland Web Design and Development">
    Lumidant LLC
  </a>
  ·
  <span class="adr">
    <span class="street-address">1220 West Sixth Street</span> |
    <span class="extended-address">Suite 506</span> |
    <span class="locality">Cleveland</span>,
    <span class="region">OH</span>
    <span class="postal-code">44113</span>
  </span>
  · <a href="blog/">Blog</a>
</div>