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: (707) 827-7000</div> <div>F: (707) 829-0104</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"
> <divclass="fn org"
>O'Reilly</div> <divclass="adr"
> <divclass="street-address"
>1005 Gravenstein Highway North</div> <spanclass="locality"
>Sebastopol</span>, <spanclass="region"
>CA</span> <spanclass="postal-code"
>95472</span> <divclass="country-name"
>USA</div> </div> <divclass="tel"
><abbrclass="type"
title="work">T:</abbr> (707) 827-7000</div> <divclass="tel"
><abbrclass="type"
title="fax">F:</abbr> (707) 829-0104</div> <div><aclass="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 span
s and div
s to mark up the distinct hCard properties. ...
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.