20 Sep 2007

The Best microformats Resources for Web 2.0 Developers

Author: ceefour | Filed under: Ajax, Beginner, Books, Cool, Friends, HTML, News, Opinions, Plugins, Praises, Rails, Reviews, Ruby, Tips, Tools, Tutorials, Web 2.0

1206281509 ce53f3d7ff The Best microformats Resources for Web 2.0 Developers

microformats has been only two years old, yet it has brought significant changes in a relatively short time.

What is it, actually? According to, “[microformats is] designed for humans first and machines second, [they] are a set of simple, open data formats built upon existing and widely adopted standards.”

Enough with the fluff, let’s see how it actually works, microformats in action:

1408453688 afda913dd5 The Best microformats Resources for Web 2.0 Developers
Flickr picture source

The above picture is me browsing to the LinkedIn profile of one of Indonesia’s renowned Ruby on Rails experts, Arie Kusuma Atmaja. The overlay window that contains these semantic information is not a LinkedIn feature. Rather, it is the easily usable, cross-browser Microformats Bookmarklet by LeftLogic. Go on… try it if you haven’t!

As you can see, the mere act of clicking the bookmarklet shows you some important facts about Arie (or any microformats-enabled you’re currently at). In case of a microformats-enabled resume page like in LinkedIn, it shows you where he works, when, education information, and related stuff. For fun comparison purposes only, my LinkedIn profile has more detailed information than his, hehe icon wink The Best microformats Resources for Web 2.0 Developers

The best part is not only that the information is human-readable, but it can also be extracted and processed automatically by machines or software. The primary distinguishing trait of a microformats-enabled HTML page is that it has semantic meaning. A microformats processor can know the difference between a name, an e-mail address, a street address, a job, a university, and so on; while in plain HTML, all you can infer are things dealing with paragraphs, tables, lists, and so on.

Making microformats-enabled pages aren’t hard at all, actually it is very easy! It’s even much easier than CSS.

To see how simple it is, let’s see a snippet of a real-world microformats, still courtesy of Arie:

<div id="masthead" class="vcard contact">
  <div id="nameplate">
    <h1 id="name"><span class="fn n"> <span class="given-name">Arie</span> <span class="family-name">Kusuma Atmaja</span> </span></h1>
      <p class="headline title"><strong>Senior Ruby Developer at IMT</strong></p>
    <div class="adr">
      <p class="locality">Indonesia</p>

Most of the above snippet is just HTML. The microformats part is simply the class=”something convention. Simple, and it gets the job done. icon smile The Best microformats Resources for Web 2.0 Developers

Some more commonly used microformats specifications include:

Despite all these specifications, “who uses it?” is a good question. It turns out, there has been many, and more and more sites are adopting it. LinkedIn with hResume is one example, along with Google Maps, Yahoo, Flickr, and all these cool guys have been using them. Why shouldn’t you?

Interested? Here are some stuff to get you started:

  1. Online Tools
    1. Microformats Bookmarklet by LeftLogic
      A handy microformats explorer bookmarklet. Useful also if you’re on the go and you want to check out some microformats. No need to install anything fancy on the computer.
    2. Operator Firefox Extension
      Microformats explorer extension for Firefox. Whether you’re a web developer or simply want to check out this latest technology, this is a very useful tool.
    3. Tails Firefox extension is another microformats Firefox extension
    4. Almost Universal Microformats Parser is a useful web-based tool to parse microformats.
  2. Tutorials and Resources

    1. Microformats, what they are and how to use them, by Smashing Magazine
    2. Microformats Tutorial by XFront
      This is a very extensive tutorial. The complete tutorial package including the example files is a 13 MB download! icon smile The Best microformats Resources for Web 2.0 Developers
    3. How to Use Microformats by Vitamin Features
    4. Introduction to Microformats by
    5. The Big Picture on Microformats by Digital Web Magazine
    6. Another by Digital Web Magazine: Microformats Primer
    7. Back to the future: Mozilla Firefox 3.0 Does Microformats
      Read/WriteWeb’s articles also touched microformats-related stuff quite often.
  3. Microformat Parsers
    1. Mofo Ruby Gem and Rails Plugin
      Of course, this is Ruby on Rails blog! Mofo is a microformats parser for Ruby and it also doubles as a Rails plugin. Check out Chris Wanstrath’s post for more information.
      There are also microformat parsers for other languages:
    2. Sumo is a microformats parser for JavaScript
    3. hKit is a microformats parser for PHP
    4. Microformats Parser is another parser for PHP
    5. Microformats Parser for Python
    6. Hpricot Ruby Gem
      Found a bizarre microformat or inventing your own? No problem, Hpricot comes to the rescue. Parse any HTML-ish document as you see fit… More info available from this RedHanded post.
    7. scrAPI is another Ruby library for parsing HTML that can be useful for processing microformats.
  4. References
      “Official” web site of Microformats. You can read everything about microformats, current specifications and newly proposed specs.
    2. “Microformats: Empowering Your Markup for Web 2.0″ Book by John Allsopp
      &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
      This is the first book dedicated to, and is a comprehensive guide to, microformats. It explores why, in Bill Gates’s words, “We need microformats”; how microformats work; and the kinds of problems microformats help solve. the book covers every current microformat, with complete details of the syntax, semantics, and uses of each, along with real-world examples and a comprehensive survey of the tools available for working with them. the book also features case studies detailing how major web content publishers such as yahoo put microformats to work in their web applications.
    3. Brian Suda’s microformats cheatsheet
      For people who likes it quick and done, this is perfect. It lists microformats properties by format and also lists each format and the hierarchy. This includes elemental microformats, compound microformats and some of the standard design patterns used.
    4. Dave Child’s microformats cheatsheet is another good reference
    5. And more cheatsheets on wiki
    6. Gleaning Resource Descriptions from Dialects of Languages (GRDDL) is a recently approved W3C Recommendation that can be used, among others, for extracting semantic information (including microformats) from HTML pages.
    7. microformatique. A blog about all things microformats!

Feel free to add more resources as you see fit, in the comments! icon smile The Best microformats Resources for Web 2.0 Developers


  1. I originally thought I was gonna list 10 resources… But it seems there are much more icon wink The Best microformats Resources for Web 2.0 Developers
  2. More links to John Allsopp’s resources

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.