VCards are a common format for exchanging address information, business locations, place data and more. But on the web vCards become invisible to search engine spiders and webmail apps often can't import them straight from a download link, which is why the [http://microformats.org/wiki/hcard hCard microformat] was created. Designed to be a simple, open and distributed format, hCards are an extension of (X)HTML that makes it easy to represent people, companies, organizations, and places. All the data encapsulated in hCard maps directly to the [http://www.ietf.org/rfc/rfc2426.txt vCard specification] so programs that can handle vCards can easily add hCard support as well (whether or not they do is up the creators). ##Overview## As with other microformats, hCard uses semantic HTML or XHTML to add more meaning to your address data. Using a series of pre-defined class definitions, hCard creates a consistent format that spiders and people alike can easily recognize. The root class name for hCard is "vcard," so the standard definition starts like this:
Your Name
As you can see the definition is wrapped in a
tag with the root class of vcard. The next line is an ordinary link to your website with your name as the link text. Note however the class definitions, url and fn. Obviously url denotes the fact that this chunk of data is a url, but what about that fn class. It gets a little bit complicated, do some contradictions in the vCard spec, but generally you can think of fn as short for formal name. There is also an n property that can be used, though n can be assumed to be the same as fn in most cases. ##Full Example## So far all we have is a name leading to a website. For many that's all the contact info they're willing to give, but for the sake of example let's consider Joe Monkey, an employee of ACME Banana company. In this case we might create an hCard that looks like this:
Joe Monkey
ACME Banana
Work:
314 Monkey Avenue
Monkey Island, CA 94301
USA
Work +1-555-555-5555
Fax +1-555-555-5555
Email:
AIM Most of the class names here should be self-evident, save perhaps locality, which just means the city of municipal area. Note that in this case we're making a card for an individual at a company so we've used separate definitions for fn and org. However, when dealing with a company listing it would be perfectly acceptable to combine the two into one line, like so: ACME Banana The various class properties are as follows: Required: # fn # n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix) Optional: # nickname, sort-string # url, email (type, value), tel2 (type, value) # adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value), label # geo (latitude, longitude), tz # photo, logo, sound, bday # title, role, org (organization-name, organization-unit) # category, note # class, key, mailer, uid, rev ##The hCard Creator## There's no need to write out all your hCard markup by hand. The very handy [http://microformats.org/code/hcard/creator hCard creator] can handle the grunt work for you, generating some nice cut and paste code. If you're displaying hCards dynamically (say as part of your hot new social network's profile page), just whip up a skeleton like the one above and replace the fake data with the variables from your database. It's also worth noting that contact or profile pages aren't the only place you can use hCard. HCard markup works well inside a block, for instance when you're citing another blog and want to provide some basic contact info for the author of the blog. Once you've got a basic handle on hCards, go ahead and put them in the wild and add your site to list of example on the Microformats Wiki. If you're feeling extra frisky have a read through the [http://microformats.org/wiki/hcard hCard specification] for all the gritty details.