Extras & Tools

back to all tools and extras

hCards

Whenever you need to display the contact details of an individual or an organisation, you can use a special set of HTML class attributes defined in a microformat known as hCard.

What are Microformats?

There are many kinds of microformats, each of which is designed to provide standardised ways to represent information, with the aim of making it machine-readable (allowing it to be used by programs that access this kind of data). Other examples include hCalendar for calendar events, hReview for ratings and reviews, and hRecipe for cooking recipes.

What is hCard?

hCard provides a standardized set of values for the class attribute, used to convey contact information such as names, addresses, telephone numbers, email addresses, IM names, and organisation names (such as work places). It is based on vCard, which is a popular format for contact information used in software such as Microsoft Outlook and the Apple address book.

Let's look at an example for an employee of Bob's Records, where a set of <span> and <div> elements have been wrapped around the name and address, and each of these uses a class atribute to indicate what kind of information that element contains:

<div class="vcard">
  <span class="fn">Bob Wilson</span>
  <div class="org">Bob's Records</div>
  <a class="email" href="mailto:hello@bobsrarerecordings.com">
    hello@bobsrarerecordings.com
  </a>
  <div class="adr">
    <div class="street-address">Metropolitan Ave</div>
    <span class="locality">Brooklyn</span>, 
    <span class="region">NY</span>, 
    <span class="postal-code">11211</span>
    <span class="country-name">USA</span>
  </div>
</div>

Using hCard

This only shows a few of the possible fields that you can use in an hCard - other examples include email addresses, IM names, birthdays, photos, home and work addresses and phone numbers, preferred phone numbers.

You can see the full range of fields available for hCard here: http://microformats.org/wiki/hcard-cheatsheet

There is a handy tool for creating hCard formatted contact details here: http://microformats.org/code/hcard/creator

You can use CSS to control the presentation of these elements in any way you choose, by default these elements are not displayed in a different way.

How hCard can be used

Because computer programs are being told which element contains which kind of information (i.e. which element contains a street address, and which contains a postal code) they can make this available to people and other programs.

Programs can export contacts in a standardized format so that they can be imported into other email programs.

There are several plugins for browsers that allow users to save contact details to their address book if the address is written using uses hCard.