getting-started

This is aimed specifically at an audience of designers and IA's, not programmers, so excuse the non-technical language. Trying not to be too contrived or patronizing but it is a fine line, that I'll hopefully nail a bit better after a re-edit - MarkRickerby

Getting Started with Microformats (Draft)

Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content.

One of the key principles of Microformats, is to privelege human readable content. This means that you should think first and foremost of your content design being readable and accessible to web viewers. Using the most appropriate HTML elements and applying structured class names to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools. But the point is that you shouldn't have to go out of your way to produce such machine friendly markup - Microformats make it easy to integrate this greater degree of structure into your websites, without the overhead of having to learn complicated new languages or formats.

Moving to Microformats: A 5 Minute Primer

The best way to understand Microformats is to start using them straight away. Since they're embedded in ordinary HTML, you can take existing pages and add these structured class names to the markup, but it's recommended that when doing this, you also take a close look at the overall tag structure that you're using - maybe there is a better way to say what you mean using basic HTML tags.

A simple, and very popular place to start is with hCard - a microformat for displaying personal and organizational contact details. You can think of hCard as a way to embed mini business cards in web pages, but glancing over the examples shows a lot more possibilities than just that.

Let's imagine a static page that contains some personal contact details, the main part of which looks something like:

<div id="contact">
  <h2>Contact Me</h2>
  <p>You can contact me via email to <a href="mailto:jane@example.com">jane@example.com</a>, or send stuff to me at the following address:</p>
  <p>255 Some Street,<br />
     Some Place,<br />
     Some Town</p>
</div>

This snippet has all the human readable information needed to produce a valid hCard representation - all that is necessary is to add some additional structure that defines each particular detail. The first thing to do is to add the vcard wrapper class to the enclosing div, which identifies this particular block as an hCard:

<div id="contact" class="vcard">

One thing that is noticeably missing from this snippet is the full name of who these contact details apply to - this makes the information presented more ambiguous and harder to understand. It's good to be explicit with such things, and it just so happens that the full name property is a compulsory field within an hCard as well. So let's add it, using the fn class:

<div id="contact" class="vcard">
   <h2>Contact Me</h2>
   <h3 class="fn">Jane Doe</h3>
   <p>You can contact me via email to <a href="mailto:jane@example.com">jane@example.com</a>, or reach me at the following address:</p>
   <p>255 Some Street,<br />
     Some Town,<br />
     Some Place</p>
</div>

Another thing we can do to improve the semantics of the snippet is to add an address tag. This isn't strictly part of the hCard format itself, but it is good practice to use it to display contact details like this. At the same time, we should also get rid of the bed & breakfast markup in the second paragraph, replacing it with structured classnames for the components of a mailing address: adr, street-address, locality, and region. We can also add the email class to the mailto link, to complete the structure of the hCard:

<div id="contact" class="vcard">
   <h2>Contact Me</h2>
   <h3 class="fn">Jane Doe</h3>
   <p>You can contact me via email to <a class="email" href="mailto:jane@example.com">jane@example.com</a>, or reach me at the following address:</p>
   <address class="adr">
     <div class="street-address">255 Some Street</div>
     <div class="locality">Some Town<div/>
     <div class="region">Some Place</div>
   </address>
</div>

And that's all it takes!

Aside from the advantages of having such structured visible data, providing these additional class names also increases the visual design possibilities.