hCard

hCard is a microformat for publishing the contact details of people, companies, organizations, and places,  in (X)HTML, Atom, RSS, or arbitrary XML. The hCard microformat does this, using a 1:1 representation of vCard properties and values, identified using HTML classes and attributes.

The basic format of hCard is to use vCard object/property names in lower-case for class names, and to map the nesting of vCard objects directly into nested HTML elements.

Now the question is why “hCard”? The name is derived from its inspiration, the IETF-standardized vCard format. You may not know of the vCard, but  chances are that you’re using software that’s based on the vCard standard: contacts in Microsoft Outlook are vCards, as are the contacts in Apple’s Address Book application; it’s also likely that the contacts in your mobile phone are actually stored in vCard format, which is what makes it easy for you to bluetooth your contacts across to other phones made by different manufacturers—they, too, use the vCard format. If you drag a contact from your Outlook address book onto your desktop, you’ll see that the file extension is .vcf. There are no prizes for guessing what that’s short for! hCard is an HTML (emphasis on the H) adaptation of the vCard format.

Regardless of how your address book or email contacts software displays the contact information, the underlying makeup of the vcard is based on the standard, and if you were to export one of your contacts, save it as a .vcf format, and then open it in a text editor, you’d see something like this:

If you want to specify contact details for a person on a web site, you cannot use basic HTML/XHTML to do so. However, you can use hCard to mark up your HTML, reusing the naming conventions set out in the vCard format.
Consider the HTML:

With microformat markup, that becomes:

Here the formatted name (fn), organization (org), telephone number (tel) and web address (url) have been identified using specific class names; and the whole thing is wrapped in which indicate that the other classes form an hcard, and are not just coincidentally named.
If the hCard is for an organisation or venue, the fn and org classes are used on the same element, as in <span>Wikipedia</span> or <span>Wembley Stadium</span>.
Other, optional, hCard classes also exist.
Live example
Here are the Wikimedia Foundation’s contact details, as a live hCard:

Wikimedia Foundation Inc.
200 2nd Ave. South #358
St. Petersburg, FL 33701-4313
USA
Phone: +1-727-231-0101
Email: info@wikimedia.org
Fax: +1-727-258-0207

The mark-up (wrapped for clarity) used is:

(Ordinarily, one would use

so that the output included region=”Florida”, but the abbr element is not supported on Wikipedia.)

Note that, in this example, the formal name (fn) and organisation (org) properties are combined on one element, indicating that this is the hCard for an organisation, not a person. It’s not difficult to mark up contacts using hCard. If you’re worried about getting it wrong, you can easily  create an hCard using the hCard creator, then adapt it as you see fit, perhaps so that data can be dynamically generated. If you have an online telephone or contacts lookup service, it would take but a few moments of development time to add the necessary markup and, in an instant, make all those contacts available in hCard format.

You can use hCard in many ways, in terms of the HTML that you choose to use to structure the content, but as long as you stick to the reserved class name values stated earlier, and apply them to the correct parts of the data, you can’t go wrong.

Latest posts by Sraddha Agrawal

• How to place an swf file in the background of an html element - August 26th, 2010
• Get on TOP of Major Search Engines - August 12th, 2010
• My Snippet - Wordpress Plugin for Customized Sidebar Content - August 5th, 2010
• Cloud Computing - July 29th, 2010
• Criticism vs. Improvement - July 22nd, 2010