First of all what is a hCard?
hCard is a simple format for sematically representing people, companies, organisations or even places in HTML or XHTML.
And what are Microformats?
Well the Microformats website states:
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards…
Basically Microformats is a way to add semantic meaning to your code that is then searchable and indexable by search engines (Google supports Microformats) and other software and the great thing about using Microformats is that it uses nothing more than the standard HTML that you already know to add semantic meaning to otherwise plain markup. Maybe an example can explain it better that I can!
Perhaps you mark up you company details something like this:
<h4>Midwinter Duncan Grant</h4>
<p>Piazza Donatello<br />
61012 Gradara (PU)<br />
Italia<br />
<br />
<a href="https://www.midwinter-dg.com">www.midwinter-dg.com</a>
<a href="mailto:info@midwinter-dg.com">info@midwinter-dg.com</a><br />
Cell: +39 334 5841192</p>
The following information formatted as a hCard would be something like this:
<div class="vcard">
<a href="https://www.midwinter-dg.com" class="fn org url">Midwinter Duncan Grant</a>
<div class="adr">
<div class="street-address">Piazza Donatello</div>
<span class="postal-code">61012</span> <span class="locality">Gradara</span> <abbr class="region" title="Pesaro Urbino">(PU)</abbr>
<div class="country-name">Italia</div>
<!--end adr--></div>
<div class="email-addr">
email <a class="email" href="mailto:info@midwinter-dg.com">info@midwinter-dg.com</a>
</div>
<div class="tel">
<span class="type">Cell</span> +39 334 5841192
</div>
<!--end vcard--></div>
In order for the hCard to be set up properly, you need to add the “profile” attribute to the <head> tag on any page that features the hCard:
<head profile="http://www.w3.org/2006/03/hcard">
What does it mean?
First of all, everything is enclosed in a div with a class of “vcard” marking it as equivalent to a standard Address Book vCard.
The next line is a link to my site with my name – this has 3 classes applied to it: “fn” (family name) marks it as being my name, “org” (organization) marks it as also being the name of my company and finally “url” – well, yes it’s also a link to my site!
From here on it’s really quite simple – the div with a class of “adr” contains my address divided up into “street-address”, “postal-code”, “locality”, “region” and “country-name” (note: because I’ve written the region as (PU) I’ve used an <abbr> tag with the full name in the ‘title’ attribute.
Then follows “email-addr” and “tel” containing “type” Cell.
Now you have the hCard set up, there’s one last trick you can do – you can offer that information for download straight to your visitor’s address book. We can achieve that by using a conversion service – in this case h2vx.com Contacts Coversion Service. Browse to the site, and select ‘Contacts Coversion Service’, then type in your URL.
Now simply copy and paste the link on to the page with your hCard. Fire it up in your browser and click on the link – the information should be downloaded straight to your address book.
If you are having any problems setting up your hCard, there is a great validator to be found at http://hcard.geekhood.net/
…and finally a working example of the above code:
