Getting Started with Microformats

What are these hCards and Microformats about?

Good question. They're about changing information that is provided in a human friendly manner, into something that is just as friendly to machines. A typical example is contact information. Most people running a respectable website provide information about themselves, and how they can be contacted. Typically this information is unstructured, usually just something like an unstyled list. A hCard provides a standard format of representing contact information, using XHTML, whilst keeping the legibility that the visitor requires. So instead of just saying Here is my contact information...

Joe Soap
XML Incorporated
123 Fake Street
FoxRock
Dublin 7
Ireland
jsoap@gmail.com

You now say something like "Here is my contact information..."

Whats the difference Des?

The difference is that if you view the source of this post, you'll see the second address is surrounded with semantically rich tags, making it easy for machines to understand. The fact that machines can understand your information makes it possible to automate what are otherwise annoying tasks. Adding someone to your address book for example, if you have a hCard on your page, I can add you to my address book in one click. If you're registering for my conference, just give me your hCard, No more text fields. If you want to use my new web application, just give me your hCard, no more registration forms. It just makes sense.

So it's like a virtual business card?

Exactly. Carrying business cards around with you is handy for 2 reasons. Firstly it saves you constantly telling everyone who you are, what you do, where you live and where you work, you just hand them a card instead. Also it saves the receiver of the card a lot of hassle listening to your story, and then afterwards writing down who you were, what you work as, where you work, they just look at your card. hCards are the online equivalent, they're getting popular now so get on board.

So do what I do?

Find sections of your website where you display information about yourself(if you don't have a section like this on your site, you should add one), and change the XHTML that surrounds it, so it includes the appropriate tags for hCards. For example there is a short paragraph in the sidebar of this site telling you who I am, what I do etc. But it's actually more than that. It's a business card too!

1. <address xmlns="http://www.w3.org/1999/xhtml" class="vcard">
2. <img src="http://minds.may.ie/%7Edez/images/des.png" class="face photo" />
3. <p>
4. <a href="http://www.minds.nuim.ie/%7Edez/blog/" class="url">
5. This website
6. </a>
7. is the online diary of me,
8. <span class="fn">
9. Des Traynor
10. </span>,
11. a
12. <span class="title">
13. PhD Student working in the area of Computer Science Education
14. </span>
15. in <span class="adr">
16. <span class="org">>NUI Maynooth</span>
17. a small university in
18. <span class="locality">Kildare</span>,
19. <span class="country-name">Ireland</span>
20. </span>.
21. </p>
23. </address>

And that's what I mean when I say machine readable, and human readable. You read it, and it makes sense, a computer/crawler reads it, and it generates this...

So thats one quick and easy way to get started using a simple microformat, the hCard. There any many more, and you can check them all out over at The official Microformats website, where they have tools for making cards/calendars and the like. If you use Firefox, then Tails is handy extension for dealing with Microformats. Any questions, drop them in the comments box. All the best!