Table of Contents for

The Modern Web

Microformats

Created by a grassroots coalition of developers, microformats add extra meaning to content through standardized markup patterns using existing attributes. Their main attraction is that they work with current development methods; rather than being an extension to HTML, they are a design principle or a set of standard usage patterns.

Microformats range from the fairly complex to the extremely simple. Here’s an example of probably the most simple of all:

<a href="http://flickr.com/photos/tags/gorilla/" rel="tag">About Gorillas</a>

That’s called the Rel-Tag microformat. The keyword tag in the rel attribute lets other machines know that the URL linked to in the a element is a page that is described by a tag, the name of which is the last path component of the URL—in this case, gorilla. At this point, I should probably point out—in case you hadn’t noticed—that I really like gorillas.

A more complex, although just as straightforward and useful, example is the hCard microformat, which marks up common user details with a standardized “business card” syntax. Consider, for example, this markup, which I might use to link to someone’s contact details online:

<div class="details">
<p><a href="http://about.me/petergasston">Peter Gasston</a> writes for <a href="http://broken-links.com">Broken Links</a>.</p>
</div>

The markup is fine, but the data doesn’t have a lot of aboutness; the reader would understand that this is my name and where I write, but a search engine crawler would probably not be able to make the same cognitive leap. Using the hCard pattern, I can add attribute values to that markup that provide more semantic richness:

<div class="vcard">
<p><a href="http://about.me/petergasston" class="url fn">Peter Gasston</a> writes for <a href="http://broken-links.com" class="url org">Broken Links</a>.</p>
</div>

Those few standardized class names have given much more meaning to this content for machines that are programmed to find it; a crawler that recognizes the hCard pattern will see the vcard class and know that the content inside contains the information it’s looking for: It knows the first link contains the full name (fn) of the contact, and the second link contains the organization (org) the contact works for.

There’s more to microformats than this; there are patterns for events, reviews, geographic coordinates, even recipes, and plenty more besides. Search engines like Google use them to improve their search results, so using microformats in your pages is not (only) an exercise in developer esotericism.