Everything about the hCard Microformat

2009-11-14T17:32:55Z

Probably all of us used the vCard at some point… it is used almost everywhere… from Microsoft Outlook, to your mobile phones. Being widely adopted, it has become the standard for electronic business cards. The hCard is a 1:1 representation of the vCard in XHTML format. What that means is hCard can carry contact information into a semantically correct HTML, Atom, RSS or any arbitrary XML file.

Why?

Bloggers find themselves discussing people and organizations frequently. With just a little markup, those same people or organization can be discussed in such a way so spiders and other aggregators can retrieve this information, automatically convert that into a vCard and add them in any vCard application or service.

You can embed an hCard directly in a webpage and style them with CSS to appear as you want them to be. The hCard can be ‘hidden’ within the XHTML without referencing to a separate file. That way, Google or Firefox Operator can parse through the information in the XHMTL, but it to a visitor, it’s invisible.

What does it look like?

A properly formatted vCard looks something like this:

BEGIN:VCARD
VERSION:3.0
FN:Eric Meyer
URL:http://meyerweb.com/
END:VCARD

The same vCard, in hCard format will look something like this:

<div class="vcard">
<a class="url fn" href="http://meyerweb.com/">Eric Meyer</a>
</div>

The only class properties you are adding that you would not in a non-hCard format is url fn wrapped in a vcard class.

The wrapper is vcard because, as explained earlier, hCard is simply a 1:1 representation of vCard. Furthermore because classes can have multiple values, the <a class=”url fn”>…</a> refers to both the URL and Formatted Name.

The only required property of hCard is the name. The name can be either FN (Formatted Name) or N (Name). So the simplest hCard can look something like this:

<span class="vcard fn">Eric Meyer</span>

<span class="vcard n">
<span class="given-name">Samuel</span>
<span class="additional-name">L</span>
<span class="family-name">Jackson</span>
</span>

It’s all in the classes

A more detailed hCard will look somewhat like this:

<div class="vcard">
<img src="http://somesite.com/photo.jpg" alt="photo of Samuel" class="photo"/>
<span class="n">
<span class="given-name">Samuel</span>
<span class="additional-name">L</span>
<span class="family-name">Jackson</span>
</span>
<div class="org">Organifique</div>
<a href="mailto:samuel@somesite.com">samuel@somesite.com</a>
<div class="adr">
<div class="street-address">243 Baskerville</div>
<span class="locality">Los Angels</span>
<abbr class="region" title="California">CA</abbr>
<span class="country-name">United States</span>
</div>
<div>+1.415.555.1212</div>
</div>

This hCard has been generated by the hCard creator. You can also see how your hCard might look like. But I would still recommend taking a look at the hCard cheatsheets as not all the fields in hCard is available in the creator.

Subproperties

The stree-address, locality, region, and country-name in the above example are subproperty of the class adr, similar to how N is broken up into given-name, additional-name and family-name (you do not need to use subproperties if you just use N). But that’s not all. You can break down telephone number as well by giving it a type.

For example:

<span class="tel">
<span class="type">Home</span>:
<span class="value">+1.415.555.1212</span>
</span>

<span class="tel">
<span class="type">Home</span>
(<span class="type">pref</span>erred):
<span class="value">+1.415.555.1212</span>
</span>
<span>
<span class="type">Work</span>
<span class="value">+1.415.555.1213</span>
</span>

The last one will look such (without markups):

Home (preferred): +1.415.555.1213
Work: +1.415.555.1213

Of course, the entire thing will be with a FN in a vCard wrapper.

Organization:

The vCard can be used not only for a person, but also as an organization. Here is how one might look like:

<div class="vcard">
<div class="fn org">Wikimedia Foundation Inc.</div>
<div class="adr">
<div class="street-address">200 2nd Ave. South #358</div>
<span class="locality">St. Petersburg</span>,
<span class="region">FL</span> <span class="postal-code">33701-4313</span>
<div class="country-name">USA</div>
</div>
<div>Phone: <span class="tel">+1-727-231-0101</span></div>
<div>Email: <span class="email">info@wikimedia.org</span></div>
<div>
<span class="tel"><span class="type">Fax</span>:
<span class="value">+1-727-258-0207</span></span>
</div>

Note that this is the same as a personal vCard, except FN is used with an ORG property.

Disclaimer: I copied this from Wikipedia. What can I say? I am lazy like that.

Hidden hCard

I previously talked about hCard being hidden in a webpage. This is an example of how it can be accomplished:

<div class="vcard">
<img style="display:none;" src="http://hmelius.com/identity/pavatar.jpg" alt="photo of Hussain"/>
<p>Hi, I am
<a class="url fn n" href="http://hmelius.com">
<span class="given-name">Hussain</span>
<span class="additional-name">M</span>
<span class="family-name">Elius</span>
</a>
, a second-year business student at North South University,
<span class="locality">Dhaka</span>,
<span class="country-name">Bangladesh</span>
. In my spare time, I blog and take interest in web technologies. I combined the two and founded  <span><a class="url fn org" href="http://qreativezone.com">Qreative Zone</a></span></p>
</div>

And this is how it would appear:

Hi, I am Hussain M Elius , a second-year business student at North South University, Dhaka, Bangladesh . In my spare time, I blog and take interest in web technologies. I combined the two and founded Qreative Zone.

Neat, eh?

I highly suggest looking at hCard examples from Microformats.org, and generally any of it’s related content.

Now what?

Marking up contact info in machine readable format is fairly straight forward and requires little more then adding some extra classes. To make the process easier, you might want to check out previously mentioned hCard Generator and Cheatsheet, along with the hCard validator.

Uses

Tantek Manages a Contact Conversion Service that lets you easily download hCard from any webpage into it’s vCard counterpart for your address book. He also provides a simple bookmarklet to make the process even easier.

Operator is a Firefox extension that detects microformats in a webpage and gives you options to play with the data, depending on the microformat. A similar tool called Oomph is available for Internet Explorer.