7 comments | Posted: 28 April 07 in Books, by Nathan Smith

microformats First off – my apologies to the author, John Allsopp, for this review not being marked-up in the hReview format. That being said, I have definitely gleaned no small amount of ideas from his Microformats Book, and will be implementing them when I design future sites. What exactly are microformats? Think of them as small, semantic enhancements to existing markup. They also ease aggregation of data. According to the official site...

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).

Perhaps the easiest microformat to describe is the XFN format, which grew out of a 2004 discussion amongst Eric Meyer, Matt Mullenweg and Tantek Çelik in Austin, TX at SXSW Interactive. It basically involves using the underutilized rel attribute to indicate relationship between yourself and the owner of a page to which you are linking. Linking to my wife’s site would look like this…

<a href="http://olgasmith.com/" rel="spouse">my wife</a>

Simple – right? Yes, and that’s the point. Microformats are not some new language you have to master, simply agreed upon uses of existing tags, attributes and classes to build richer categorization of data. Another microformat, pioneered by Google, is that of rel-nofollow…

<a href="http://example.com/" rel="nofollow">bad dudes</a>

“No follow” is a bit of a misnomer, because search engines will still crawl and index the link. However, they will not take that link into consideration when calculating the PageRank of the URL destination. A common use of rel-nofollow is linking to someone who has ripped off your work, in which case you want to call attention to, but not reward the misdeed.

Beyond the rel-* microformats, there are more robust types such as geo, which allows you to pinpoint locations via latitude and longitude. This can be seen on sites like Flickr, allowing users to specify exactly where photos were taken. The geo format for Dallas, TX would something like this…

<span class="geo">
  <span class="latitude">32.779193</span>,
  <span class="longitude">-96.792297</span>

It’s plain to see that using microformats needn’t be intimidating. It’s simply using POSH patterns, as Jeremy Keith has described it. Rather than invent your own XML schema for every project, and having to go through the hassle of creating a new DTD, we use building blocks that are already available to us. I don’t know about you, but I’d rather use microformats than re-invent the wheel, such as the 900+ line DTD for XHTML 1.0 Strict…


There are a variety of other microformats available, such as hCard, hCalendar, vote-links, rel-license and rel-tag. I am also keeping an eye on hResume (currently in draft status), for when I redesign my own site. The professional networking site LinkedIn already uses hResume extensively.

Microformats aren’t just for start-ups. Even big dogs like Yahoo make use of them on sites such as Upcoming. The blog aggregating site Technorati also uses them – particularly the rel-tag microformat, allowing them to create tag clouds based on popular topics. Even Bill Gates is on board…

We need microformats and to get people to agree on them.
It is going to bootstrap exchanging data on the Web.

I think this is an exciting time to be working in the web. Now that the dust has settled over the browser wars, it is up to us to help build what should have been in the first place, the Semantic Web. While some of the details are still being worked out, such as debate around appropriate usage of the abbr tag (see hAccessibility), it’s cool that we can be involved in this formative stage.

With all this fanfare around microformats, and the relative ease with which they can be deployed, the question is not “Do we need them,” but rather “Do I know them?” We are not yet at the point where microformats are an expected skill-set for web developers, but that day is rapidly approaching. This, the first official book on microformats, would be a great way to start learning.

Discuss This Topic

  1. 1 Jeremy Keith

    Nathan, you said:

    “Microformats are not some new language you have to master, simply using agreed upon uses of existing tags, attributes and CSS classes to build richer categorization of data.”

    That’s almost right except that you refer to “CSS classes”. There’s such a thing as CSS selectors but there’s no such thing as CSS classes, just (X)HTML classes. It’s a common mistake but it’s a key factor in recognising the power of markup to realise that classes aren’t just for CSS; they are, as the spec says, for “general-purpose processing by user-agents.”

    Just thought I’d better clear that up. Forgive my pedantry: I’m just a bit of a stickler for nomenclature.

  2. 2 Brian Zollinhofer

    I’d heard a little bit about microformats, but am still a little confused about what can be done with them. Can you use css formatting to format different microformats in different ways? For instance if I had a list of links with rel=“friends”, rel=“family”, rel=“co-workers” (something like that) I could use CSS to put a small icon next to each to show the difference? Kind of like a class? Or perhaps what is the difference between a microformat and a class?

  3. 3 Nate Klaiber

    RE: Brian
    You could use CSS attribute selectors to place the icons (realizing that there are issues with IE6).

    For instance, for those who are friends you could use:

    a[rel=“friends”] { styles here};

    Attribute selectors are much more robust than this (you can use them to find exact words in space separated list, starts with, ends with, contains, etc). Using this lets you style without having to add additional class attributes.

    A side benefit of microformats are extra hooks – both for your CSS and Javascript.

    Oh, and nice review Nathan – this was definitely a great book.

  4. 4 Nathan Smith

    @Jeremy: Point taken, and corrected.

    @Brian: Nate Klaiber’s explanation is correct. You can use either CSS attribute selectors, or JavaScript to target the rel attribute.

    @Nate K: I read your review, and agree – I wondered “Do microformats really need their own book?” Answer: Yes. There’s much more breadth and depth there than I had previously realized.

  5. 5 Michael Montgomery

    Just wondering — would the hReview Creator make it easier?

  6. 6 Nathan Smith

    Mike: Yes, it would. However, since Godbit pre-dates hReview, I hadn’t built it into the site. When I redesign it, hReview will definitely be a priority.

  7. 7 Larry Tomlinson

    “The blog aggregating site Technorati also uses them”

    That’s because Mr. Çelik was a key figure (if not THE key figure) in the development of Microformats and is also the Chief Technologist for Technorati. So of course he would attempt to proselytize others to the way of Microformats through a high-traffic site :)


Comments closed after 2 weeks.