Web Design in a Nutshell, 3rd Edition

Publishing Contact Information with hCard

Most web sites publish contact information for the site’s author or company, for example:

<div>
 <div>O'Reilly</div>
 <div>1005 Gravenstein Highway North</div>
 <div>Sebastopol, CA 95472</div>
 <div>USA</div>
 <div>T: [phone]</div>
 <div>F: [phone]</div>
 <div><a href="http://www.oreilly.com">www.oreilly.com</a></div>
</div>

By marking it up with the hCard microformat (which is based on the widely support vCard Internet contact information standard, hence the vcard class name), visitors to the site can easily add the site’s contact info to their address book application using an hCard-to-vCard proxy service.

<divclass="vcard">
 <div class="fn org">O'Reilly</div>
 <div class="adr">
  <div class="street-address">1005 Gravenstein Highway North</div>
  <span class="locality">Sebastopol</span>, <span class="region">CA</span>
  <span class="postal-code">95472</span>
  <div class="country-name">USA</div>
 </div>
 <div class="tel"><abbr class="type" title="work">T:</abbr> [phone]</div>
 <div class="tel"><abbr class="type" title="fax">F:</abbr> [phone]</div>
 <div><a class="url" href="http://www.oreilly.com">www.oreilly.com</a></div>
</div>

This is an hCard because it uses specific class names established as part of the hCard microformat . The specific elements are not relevant with the exception of the use of the abbr element to abbreviate the type of each phone number, and the addition of a few spans and divs to mark up the distinct hCard properties. ...