Extras & Tools

back to all tools and extras

h-cards

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 h-card.

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 h-event for events, h-review for ratings and reviews, and h-recipe for cooking recipes.

What is h-card?

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

Using h-card

This only shows a few of the possible fields that you can use in an h-card - other examples include birthdays, photos, URLs, and phone numbers.

You can see the full range of fields available for h-card in the Properties section of this page: http://microformats.org/wiki/h-card

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 h-card 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. Therefore, programs can export contacts in a standardized format so that they can be imported into other email programs.

The following link is a tool that was designed to save h-cards from a browser. http://h2vx.com/vcf/