Section E.2. Semantic Class Names

E.2. Semantic Class Names

HTML 4 has a limited set of built-in semantics. In 2004, a few web developers realized that by using carefully chosen sets of class names based on existing publishing behaviors and widely adopted Internet standards, they could extend HTML to meaningfully publish information about contacts, events, reviews, and other web data types. This section introduces microformats created for handling contact information and calendar events.

E.2.1. 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.

 <div >  <div >O'Reilly</div>  <div >   <div >1005 Gravenstein Highway North</div>   <span >Sebastopol</span>, <span >CA</span>   <span >95472</span>   <div >USA</div>  </div>  <div ><abbr  title="work">T:</abbr> [phone]</div>  <div ><abbr  title="fax">F:</abbr> [phone]</div>  <div><a  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. For a complete list of hCard class names, more about hCard, and hCard-to-vCard proxy services, see the hCard specification at microformats.org/wiki/hcard.

E.2.2. Publishing Events with hCalendar

Similar to hCard, the hCalendar (hCal for short) microformat is based on the iCalendar Internet calendaring standard, and can be used to publish event information in a manner that users can easily copy or subscribe to using an hCalendar-to-iCalendar proxy service:

 <div >  <div >O'Reilly Emerging Technology Conference</div>  <abbr  title="20050306">Mar 6</abbr>-  <abbr  title="20050310">9, 2006</abbr>  <div >Manchester Grand Hyatt, San Diego, CA</div>  <a  href="http://events.oreilly.com/pub/e/403">Permalink</a> </div> 

Note the use of the abbr element to present an abbreviated human-readable date and represent a precise machine-readable ISO 8601 date in the title attribute. For a complete list of hCalendar class names, more hCalendar details, and hCalendar proxy services, see the hCalendar specification at microformats.org/wiki/hcalendar.