If you’re building web sites you probably mark up contact information every now and then. Why not do it in a standardized ways so that you are able to quickly mark it up, style it and enhance it with microformats at the same time? The way to do this is by using hCard, a microformat for marking up contact information.

This article will not only show you why you should do this, but also exactly how!

hCard = vCard

Maybe you’ve heard of, or even used vCard before? It’s a widely adopted standard for dealing with contact info. Outlook and just about any other email application uses it, probably even your mobile phone. hCard is an HTML adaption of the vCard format.

By using hCard to mark up contact info you enable it for automatic processing. You could for example import it directly to an address application by using the Operator extension for Firefox. As of now you have to install an extension to be able to import microformat data, but as I understand it Firefox 3 will have native support for it.

Several search engines, including Google and Yahoo, has adopted microformats and this gives you the possibility to enable the search engines to more accurately find your content.

The basic markup

Let’s start by marking up a name, a phone number and an URL using standard XHTML.

<div>
<h4>Gabriel Svennerberg</h4>
<div>
Tel: +46 470-76 40 50
</div>
<div>
<a href="http://www.svennerberg.com/">www.svennerberg.com</a>
</div>
</div>

As you can see there’s nothing fancy here. Just some basic XHTML. But now comes the interesting part: how to spice it up with microformats.

Note: In my examples I mainly use div and span to mark up the content but you could just as well use any other suitable (X)HTML element such as list- or table elements.

Enhance it with some sweet microformat magic

The next step is to enhance it with microformats. For starters we want to wrap the whole thing inside a tag marked with class="vcard". We do this to tell that this part of the web page is an hCard.

We also want to define what the name of the contact is, in this case by using class="fn" (formatted name). We also want to define the phone number by using class="tel" and the url by using class="url".

And this is how it’s done. You just use the class-attribute with predefined class names, and voilá, you got some microformat-enhanced content.

<div class="vcard">
<h4 class="fn">Gabriel Svennerberg</h4>
<div>
Tel: <span class="tel">+46 470-76 40 50</span>
</div>
<div>
<a class="url" href="http://www.svennerberg.com/">www.svennerberg.com</a>
</div>
</div>

Display it with style

You can easily style the address information using the microformat classes as hooks. Here’s an example of some simple styling where I’ve used the vcard and the fn classes to style the content.

.vcard {
margin: 1em 0;
padding: 20px;
border: 1px solid #dde;
width: 15em;
background: #f4f8fd;

}
.fn {
margin: 0 0 .1em;
}

The result would look something like this.

Further enhancements

You could further enhance the content by giving it even more detailed specifications. You could for example define what part of the name that’s the first name and what part that’s the family name. This is accomplished by using class="given-name" and class="family-name".

You could also be more specific about the phone number by specifying what kind of phone number it is (e.g. work, home, etc.). This pattern is how you mark up several items of one particular type, like phone numbers. You then use class="type" to define the type of number and class="value" to define the actual number and wrap it all in a container with class="tel".

<div class="vcard">
<h4 class="fn">
<span class="given-name">Gabriel</span>
<span class="family-name">Svennerberg</span>
</h4>
<div class="tel">
<span class="type">Home</span>:
<span class="value">+46 470-76 40 50</span>
</div>
<div>
<a class="url" href="http://www.svennerberg.com/">www.svennerberg.com</a>
</div>
</div>

Adding more content

In this example I have added even more address information, like the street address, two different phone numbers and so on. By now I think you got the hang of it! You just use standard (X)HTML elements and classes to define the content.

<div class="vcard">
<h4 class="fn">
<span class="given-name">Gabriel</span>
<span class="family-name">Svennerberg</span>
</h4>
<div class="adr">
<div class="street-address">Kasernv&auml;gen 9b</div>
<div>
<span class="postal-code">352 36</span>
<span class="locality">V&auml;xj&ouml;</span>
</div>
<div class="country-name">Sweden</div>
<div class="tel">
<span class="type">Home</span>:
<span class="value">+46 470-76 40 50</span>
</div>
<div class="tel">
<span class="type">Work</span>:
<span class="value">+46 470-427 14</span>
</div>
<div>
<a class="url" href="http://www.svennerberg.com/">www.svennerberg.com</a>
</div>
</div>
</div>

As you can see there are quite a few class names that you can use to semantically mark up your content. In fact there’s more. Here’s the complete list:

  • fn, n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix), nickname, sort-string
  • url, email (type, value), tel (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, organisation-unit)
  • category, note
  • class, key, mailer, uid, rev

Class names inside parenthesis are subproperties of the preceding class name. Just like in the example with the telephone number; tel is the parent and type and value are the subproperties.

You might have noticed that there’s a class-name called geo in the list. Geo enables you to specify the geographic location of a contact by specifying coordinates. In my article, Using microformats to populate Google Map, I describe how to use microformats in combination with Javascript to populate a Google Map.

More resources

Sitepoint has an excellent article on microformats, Microformats—Plugging the Gaps In HTML
They’ve got separate sections about the different microformats such as hCard, hCalendar, hReview and so on, that’s really useful.

Microformats.org has a wiki with lots of information and examples of how to use microformats. They also have a page specifically dealing with hCard.