{Web Space Tutorials}

good tutorials, made easy

Microformat: H-card / V-card


Microformatting is the practice of good html writing. Making sure everything is nice and nead in your structure, that id and class names are specific, that your page is well organized, and a bunch of other things. Today we will be looking at H-cards and V-cards.


For this tutorial it is recommended that you have:


  1. So what is Microformatting?
  2. Putting Microformatting to good use.
  3. Sample of vcard
  4. The hcard
  5. Take the Quiz

So what is a Microformatting?

Simply put, microformatting is a way of semantic html that more accurately describes the content. For example, making the id of a div tag holding address information "address".
This was already being used before but now microformatting is more important than ever.

Putting Microformatting to good use.

One good use of microformatting are for vcards and hcards. You might not know it, but your address book application has been importing and exporting vcards for a long time now, even your mobile phone has been using the vcard format to save and send contact information around.

All of this is possible because of microformatting. Grouping information together and labeling it correctly allows for multiple programs and devices to place the information in the correct places.

Sample of vcard

A better way to understand something is to show it in action, so here is a sample vcard.

Forrest Gump vcard

Clicking that link should ask you to open up your default contact manager and add Forest's info to your contacts. Wonder how it works? Here's the code behind it all.

header('Content-Type: text/x-vcard; charset=utf-8');
header('Content-Disposition: attachment; filename="MarkSinclairKroh.vcf"'); ?>
FN:Forrest Gump
ORG:Bubba Gump Shrimp Co.
TITLE:Shrimp Man
TEL;TYPE=WORK,VOICE:(111) 555-1212
TEL;TYPE=HOME,VOICE:(404) 555-1212
ADR;TYPE=WORK:100 Waters Edge;Baytown;LA;30314;United States of America
LABEL;TYPE=WORK:100 Waters Edge Baytown, LA 30314United States of America
ADR;TYPE=HOME:;;42 Plantation St.;Baytown;LA;30314;United States of America
LABEL;TYPE=HOME:42 Plantation St.\nBaytown, LA 30314United States of America

As you can see this is a part of php code. The link goes to an external php document with this code. This is the format that almost every device and program understands. It may look a little confusing at first, but notice that every line follows a pattern. Also in order to be uniform, there are a few set properties to use to label your information.

  • Required:
  • * fn
  • * n1 (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)
  • Optional:
  • * adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value)
  • * agent
  • * bday
  • * category
  • * class
  • * email (type, value)
  • * geo (latitude, longitude)
  • * key
  • * label
  • * logo
  • * mailer
  • * nickname
  • * note
  • * org (organization-name, organization-unit)
  • * photo
  • * rev
  • * role
  • * sort-string
  • * sound
  • * tel2 (type, value)
  • * title
  • * tz
  • * uid
  • * url

The hcard

Another, newer and a bit more html relevant example of microformatting is the hcard. The hcard is another way or organizing your contact information so it is easily read by browsers and other things. The difference here is that this goes directly into your html code rather than in a separate document. Hcards use the same properties as the vcard, also the beginning of each hcard must have a class name of vcard, and lastly the properties are usually listed as a class, with the fn org and url properties inside of an <a> tag. Here is an example: sample hcard taken from www.markkroh.com/

169 University Avenue
Palo Alto, CA   94301
Work +1-650-289-4040
Fax +1-650-289-4041

You may not see much of a difference, but look at the code behind the scenes.

<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
<span class="email">info@commerce.net</span>

Notice that each line has its own class that has at least one of the vcard properties in it. This allows computers to easily read and access the information.

Take the Quiz

Now that you've learned microformatting, take the quiz.