Microformats Primer

In: Columns > View Source

By Garrett Dimon

Published on November 14, 2005

By now you’ve probably heard of microformats and wondered what they are, exactly. Officially, they’re a set of simple, open data formats built upon existing and widely adopted standards that are designed for humans first and machines second. What does that mean to you? Fortunately, it’s simpler than it sounds.

Microformats are about using the standards we all know and love to convey as much semantic meaning as possible. Think of them as semantic best practices. They use current XHTML tags such as address, cite, and blockquote and attributes such as rel, rev, and title to create semantically appropriate blocks of code. Microformats are great because they are both usable and elegant—and all you need to do to get started with them is familiarize yourself with the best ways to apply the tags and attributes you already use.

Quick Example

Now that we understand what microformats are, let’s take a look at how they work. To keep it simple, we’ll use the hCard microformat. Say you want to display your business card information on a Web site. The vCard is the standard for electronic business cards, so naturally, we use it as the starting point for creating the hCard format. Again, microformats are built upon existing and widely adopted standards, like the vCard

We’ll start with an example vCard:

BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
ORG:Technorati
END:VCARD

Now let’s take a look at the microformat equivalent, the hCard. The first thing to note is that it just uses standard XHTML. Second, it uses the same field types as the vCard.

<div class="vcard">
<a class="url fn" href="http://tantek.com/">
Tantek Çelik
</a>
<div class="org">Technorati</div>
</div>

Just by glancing at the example hCard, you can understand what each of the values represents. You can find a more detailed explanation of how hCard evolved from the vCard format on the Microformats Wiki.

Why use them?

Now we know exactly what microformats are and have seen an example, but why bother?

Standards

Standards are critical to the future of the Web. If you don’t agree, ask any Web designer about the challenge of supporting Internet Explorer vs. the ease of supporting Firefox. And while standards like microformats might not be appropriate for every situation, awareness is the first step in knowing when to apply them. Adoption is starting to reach critical mass, and before we know it, search engines will be interpreting and understanding the increasingly complex relationships between sites, people, ideas and more.

CSS Convenience

As an added benefit of using accepted tags and attributes, we can take full advantage of the ability to style our microformats through CSS. Let’s take a look at Extensible Open XHTML Outlines, also known as XOXO. XOXO is simply a way of semantically marking up outlines.

Using the following simple example from the wiki:

<ol class='xoxo'>
<li>Subject 1
<ol>
<li>sub-point a</li>
<li>sub-point b</li>
</ol>
</li>
<li>Subject 2
<ol compact="compact">
<li>sub-point c</li>
<li>sub-point d</li>
</ol>
</li>
<li>Subject 3
<ol>
<li>sub-point e</li>
</ol>
</li>
</ol>

We can apply the following possible style rules:

ol.xoxo { list-style:decimal; }
ol.xoxo ol { list-style:lower-latin; }
ol[compact="compact"] { display:none; }

And our outline would render as follows:

1. Subject 1
a. sub-point a
b. sub-point b
2. Subject 2
3. Subject 3
a. sub-point e

When you look at it, there’s really nothing fancy going on, and that’s the beauty of microformats. Because we’re using existing and widely supported markup, the formatting possibilities are almost limitless. You could use an outline format for navigation, slideshows, a table of contents, or just a good old-fashioned outline. Best of all, the styling is still entirely in your control.

Plug-and-Play JavaScript

Like CSS, microformats let you to do some interesting things through JavaScript and the DOM. After all, microformats are just a bunch of XHTML. The only difference is that your scripts don’t need to manipulate elements based on custom markup. In fact, anybody can create a script for working with a certain microformat and give it away. When it’s time to integrate the script in your page, it’s a breeze because you’re already using the same semantically valuable markup to identify the bits and pieces for the script to manipulate.

Machine-Readable

We’ve already covered the benefits of microformats being human-readable, but what about “machines”—you know, search engines? One example is the elemental microformat rel="nofollow". By adding this element to your anchor tags, you’re telling search engines not to give any weight to those links. This is just one of many machine-readable microformats.

Imagine for a moment a future where search engines recognize microformats and take advantage of their inherent metadata. You could find reviews for specific products or pages, vote for or against a site when you link to it, or track the development of a conversation across multiple sites with minimal effort.

Implicit Metadata vs. Explicit Metadata

For search engines and machine-readable formats, accurate and appropriate metadata is one of the keys to tying it all together. Providing explicit metadata requires extra effort and has traditionally been extremely challenging or neglected altogether. With microformats, implicit metadata is provided by virtue of using the right markup. It won’t replace the need for explicit metadata, but it can serve as a great supplement or at least a good start.

By using microformats, you’re not only writing better markup, but also adding a wealth of machine-readable information for search engines and other applications—metadata that they can use to establish relationships, draw connections, and improve the quality of search results.

Meaningful Markup is Good Markup

When writing markup against deadlines and priorities, it’s easy to forget that somebody else will eventually have to maintain it. Conveniently, some of the central ideas behind microformats revolve around the fact that they are designed for humans first and created with simplicity in mind. This means you’ll have markup that is easy to understand and maintain for everyone, including:

• The engineer integrating your code next week
• You updating your code next month
• The new guy taking over your job when you get promoted next year

Summary

Now when you’re hanging out and somebody brings up microformats, you’ll be ready to jump right in and hold your own. The details may be a bit overwhelming, but with a little reading, you’ll gain priceless insight into markup and standards that can help you even when you’re not using microformats.

Related Resources

• Microformats.org
• Microformats Discussion List
• Introduction to Microformats
• Usable Microformats by Andy Hume – An in-depth exploration of vCards

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: XHTML, Technology, Content, Basics, XML