• hCard

    Jan 27 2006

    Continuing my discussion of microformats, let's take a look at the hCard. The hCard microformat is a way of identifying contact information in HTML. People can use tools to look into the HTML and extract this information as a vCard. vCard is a standard for an electronic business card. There are a number of values you'd expect (name, phone number, organisation, etc.). hCard takes these labels and uses them as class names around data in HTML.

    Here are the more common values you can use in hCard (for the complete list, see the wiki:

    • fn (family name)
    • nickname
    • url
    • email
    • tel (telephone)
    • adr (address)
    • org (organization)
    • etc...

    Every hCard starts inside a block that has class="vcard". So, a very simple hCard might look like this:

    <div class="vcard">
       <span class="fn">Jesse Skinner</span>
       <a class="url" href="http://www.thefutureoftheweb.com">http://www.thefutureoftheweb.com/</a>
    </div>

    Some of these types have subproperties. For example, the 'tel' value contains 'type' and 'value'. This way you can specify separate home and business phone numbers. The 'adr' type has a lot of subproperties (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value). An address might look something like this:

    <div class="vcard">
       <div class="fn">Jesse Skinner</div>
       <div class="adr">
          <span class="locality">Berlin</span>,
          <span class="country-name">Germany</span>
       </div>
    </div>

    The class names don't have to mean anything within your page. However, you can always take advantage of them to style your contact information. You could also style them in your browser's User Style Sheet, so that you can find them while you surf the web.

    The hCard standard is very flexible. It doesn't matter which tags you put the classes on. It certainly doesn't have to be in nested div tags. You could just mark up your contact information any way you like, and then wrap the data in span tags to tie the data together. For example, it can be within regular text in a paragraph:

    <p class="vcard">
      My name is <span class="fn">Jesse Skinner</span>.
      I live in <span class="adr"><span class="locality">Berlin</span>,
      <span class="country-name">Germany</span></span>.
      I work for <span class="org">Strato AG</span>.
      I have a web development blog at
      <a class="url" href="http://www.thefutureoftheweb.com/">http://www.thefutureoftheweb.com/</a>.
    </p>

    There's lots of tools already, and more on the way. If you don't want to install a browser plugin, or if you want to give all visitors to your site a way to download your hCard as a vCard, X2V is a service that does just this. Just link to:

    http://suda.co.uk/projects/X2V/get-vcard.php?uri=[URL with an hCard]

    For example, click here to download a vCard of this simple hCard:

    My name is Jesse Skinner. I live in Berlin, Germany. I work for Strato AG. I have a web development blog at http://www.thefutureoftheweb.com/.

    hCard, like other microformats, is wonderfully simple yet incredibly powerful. You can begin using it right away with very little work, without waiting for the standard to be widely used. As more people start looking for hCards (and your contact information), your web site will already make things easier for them.

  • Comments

    1. Ben Buchanan at 11:39pm on February 22, 2006

    One thing I've noticed about hCard is that it inherits some problems from vCard. hCard works nicely for "converstaional english" style cards, but it doesn't fit formal business cards quite so well.

    If you have to pack in a lot of corporate info, you run out of types; plus you can only insert one URL, losing distinctions between work and private.

    The nesting also makes it a pain to try to use semantically-rich elements like definition lists, which would work beautifully as hCards but don't type things properly (unless you're happy to have a series of single-pair DLs).

    Still, hCard is very useful :)

    2. Jesse Skinner at 2:19am on February 23, 2006

    You're right, I hadn't noticed the single-URL problem. It seems rather weird that e-mail and telephone both allow multiple types, but not URL.

    This problem is only amplified by the number of new contact methods available. The wiki suggests using the URL field for Instant Messenger contact info, and even Flickr or del.icio.us pages! See:

    http://microformats.org/wiki/hcard-examples#New_Types_of_Contact_Info

    3. Jesse Skinner at 2:28am on February 23, 2006

    On the hCard parsing page (http://microformats.org/wiki/hcard-parsing) it says:

    Other properties, like "adr", "email", "url", "tel", etc., may (and often do) appear more than once, and thus the parser continues to look for each occurrence within the contents of the hCard.

    So multiple URLs are allowed? This is strange, I think I'll have to get this clarified.

    4. Ben Buchanan at 10:40am on April 18, 2006

    Off the top of my head I think a lot of parsers accept more than URL; replacing that value with each new one. Whether that's what was intended by the hCard documentation is another thing ;)

    But the vCard standard only allows for one (as far as I can work out) and I didn't find a way to "type" the URL field - at least, not one recognised by any of the parsers we tried.

    vCard definitely needs an update to include more contact methods. In fact it'd be better for the format to be self-defining on some things.

    5. Colin D. Devroe at 9:46am on April 19, 2006

    I believe fn is formatted name, not family name.

    6. Hamidou at 12:06pm on December 11, 2007

    The limitations I found with hcards are
    1) just like vcards, the fact that you're limited to the set of properties you can create. In a world where people can communicate using different channels and protocols this can be very annoying. How many of you wanted to add a specific field for your skype, facebook, msn messenger, etc.  and couldn't find any place to add it ?
    2) It seems to focus more on presentation (but I could be wrong, I still need to read more on it). That means you loose the ability to properly parse and retrieve the information.

    7. Penny at 7:10pm on January 25, 2008

    Hi Jesse,

    Thanks for the info in this blog.
    I have been hired to create a vCard signature for emails with their logo. The company gave me a sample of what they wanted, but that company uses a service.
    Does suda.co.uk charge for their conversion? Will it work for any properly formatted html page?
    http://suda.co.uk/projects/X2V/get-vcard.php?uri=[URL with an hCard]

    Thanks,
    Penny

    8. Jesse Skinner at 7:34am on January 29, 2008

    @Penny - I'm not sure about suda.co.uk, but it seems to me they're happy to provide the service for free. You might want to ask them about reliability and commercial use. Perhaps they would give you a copy of the service to host on your own server.

    9. Penny at 12:42pm on January 29, 2008

    Jesse,
    Thanks for responding.
    I emailed Brian Suda and told him it was for one of my clients. He confirmed that his service is no charge. Thanks for the idea of asking for a copy of the service. Interesting thought.

    Penny

    10. Anne at 2:43am on February 12, 2009

    Hi,

    I am using vcard in my webpage but am not able to use the style class for the link in my way. Is there any way to retain the functionality of vcard and display the link in a different style class format ?

    Help on this pls!

    Commenting is now closed. Come find me on Twitter.