Getting started with microformats is easy. Here’s a simple guide to help you on your way.

Microformats are simple ways to add information to a web page using mostly the class attribute (although sometimes the id, title, rel or rev attributes too). The class names are semantically rich and describe the data they encapsulate.

Using microformats makes your data easy to consume and publish in a standardized way, so that you can do things like make your data available for indexing, searching or to do tasks like download a contact’s information or add an event to your calendar simply.

Your first microformat in 5 minutes or less!

You can put a microformat on your website in less than five minutes.
The following three steps will take you through the process of putting
an hCard – your online business card – on your site.

1. Find your name somewhere on your website

The best place is a part of your site that’s the same on every
page. If you have a blog, the footer template or sidebar is usually a
good place to start. However, you can always test microformats out in
a regular blog post.

2. Wrap your name in an “fn”

The “fn” class indicates that this is your “formatted name”. If you have a complex name (more than just first and last), see these examples for more information on how to structure your name.

<span class="fn">Jamie Jones</span>

This example shows a span element because it will work almost anywhere on the webpage, but you can and should use the most appropriate element for your use-case.

3. Wrap it all in a “vcard”

The “vcard” class declares that everything inside is the hCard
microformat:

<span class="vcard"><span class="fn">Jamie Jones</span></span>

Again, we used a “span” element because this is a basic, versatile, element – but if your use-case was for your information on your website that you’ve built and the point of contact, the address element would be more appropriate.

<address class="vcard"><span class="fn">Jamie Jones</span></address>

The address element indicates that the person in the hCard is the contact for the page (or a major portion thereof).

Or perhaps you’re using your name in a statement about you. You may want something more like this:

<p class="vcard">Hi, my name is <span class="fn">Jamie Jones</span> and I dig microformats!</p>

Congratulations! You now have a basic microformat on your website! Now that you’ve had your first experience with microformats, here are some next steps:

1. Add more information to your hCard
2. Link to your friends and contacts with XFN
3. Add events to your site with hCalendar
4. Review movies, books, and more with hReview

Still confused? Don’t worry – you can talk to some real people about your problems either on our IRC channel or on our mailing lists.