Microformats: What, Why, and How

There's a lot of data on the web. Like, a lot. But I would guess that the data most useful to the masses—such as information about people they need to contact or events they need to attend—is stored in HTML, where you can't easily get at it. So, who you gonna call? Microformats is attempting to take on the job!

What?

Let's take this from the top. What are microformats? Off the homepage of microformats.org comes this definition:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

A good start, but we need a bit more to clarify. You can find a whole list of definitions on the site, but here's the summary: microformats are a set of standards for embedding easily extractable data on your pages, using technologies you are comfortable with today. The great part about this is that you probably have content on your site right now that you could mark up with a microformat. The even greater part is that it will only take you a couple of minutes after reading this tutorial.

Why?

So why should you use microformats? What's the incentive? Well, if you're convinced that HTML should be semantic just because, then microformats will click with you. Otherwise, I'll persuade: as we noticed, the whole idea of microformats is to standardize that way data is marked up on a page, so that it can be easily extracted. Currently, there aren't a whole lot of tools that take advantage of microformats, but I think that will change. Using microformats in your work will prepare your websites for the future, when microformats will be much more widespread. Again, the website has general list of what you can do with microformats. There's already decent Firefox addon for extracting microformats; it's called Operator.

Then, Dan Web has created a simple JavaScript library called 'Sumo' that extracts microformats for use with JavaScript. You can also try the microformats bookmarklet.

How?

Well, if you've gotten this far, it's obvious you and microformats were meant for each other. So let's hop right in and look at one. But before we do, here's the general structure of the microformats we'll be looking at: generally speaking, if they involve more than one element in our code, they use classes. If they are only concerned with one element, it's usually the rel attribute that's used.

hCalendar

hCalendar is an easy way to mark up events. We'll start with an element that declares our event:

1	<div class="vevent">
2
3	</div>

If you have multiple events, you should wrap them in a div.vcalendar; however, it's not necessary. There are two required properties for an event: the start date (dtstart) and the summary. Let's add these:

1	<div class="vevent">
2	<p>This year, our <span class="summary">company holiday dinner</span>
3	will begin at <span class="dtstart">2009-12-18T17:30</span>.</p>
4	</div>

Human-readable, eh? Not that date! You're right; although microformats are written for people first, dates are one area where it's important that computers can read it. Common convention would be to write the date with an abbr tag, in which case the title attribute would be the value for the property value:

1	<abbr class="dtstart" title="2009-12-18T17:30">5:30pm on Friday, December 18.</abbr>

There are other, optional properties you can add, as well. How about an end time, or a location?

1	<p>We'll meet in the <span class="location"> conference room of the Tower Hotel</span>,
2	which we have reserved until <abbr class="dtend" title="2009-12-18T20:30">9:30pm</abbr>.</p>

Using the Operator Toolbar in Firefox, we can see that this event is on our page. We can work with it in several ways:

If I choose to export it to Google Calendar, it perfectly carries over the values we have set.

For more about hCalendar, check out the hCalendar documentation,

hCard

Let's move on to hCard; hCard is a lot more complicated than hCalendar, but we won't get into all the details. If you want to read more later, check out the docs.

Again, we start with our root:

1	<div class="vcard">
2	</div>

For hCard, there are only two required properties; the name (n) and the formatted name (fn). Usually, there are the same element.

1	<div class="vcard">
2	<p class="fn n">John Doe</p>
3	</div>

Without going too deep, I'll note that this format implies that 'John' is the first name and 'Doe' is the last name. If you want to specify this, you can use the given-name and family-name classes:

1	<span class="given-name">John</span>
2	<span class="family-name">Doe</span>

Of course, you'll usually want to add more than just your name. You can add a nickname, photo, email address, birthday, url, telephone number, and address, just to name a few.

<p class="nickname">JayDee</p>
<img src="http://www.johndoe.com/avatar.jpg" class="photo" />
<ul>
	<li class="email"><span class="type">Personal:</span> <span class="value">johndoe@gmail.com</span></li>
	<li class="email"><span class="type">Work:</span> jdoe@example.com</li>
</ul>
<ul>
	<li class="tel"><span class="type">Home</span>: <span class="value">(416) 123-4567</span></li>
	<li class="tel"><span class="type">Work</span> 416-987-6543</li>
</ul>
<p class="bday">January 1, 1980</p>
<a href="http://www.johndoe.com" class="url">My Website</a>
<address class="adr">
	<p class="street-address">123 Main Street</p>
	<p><span class="locality">Toronto</span>, <span class="region">Ontario</span> <span class="postal-code">M2W 4R5</span></p>
	<p class="country">Canada</p>
</address>

There are a few things to note here:

All the class names I've used here are the hCard properties.
Some properties, like url and photo, take their values from the href or src attributes, and not the text of the element.
Properties like tel and email can have two child properties: type and value. If only type is defined, value will be implied (as you can see in the second email address and telephone number).

Using Operator, I can export this as a vcard …

… and open it in Outlook.

See? Everything we defined is here!

xFolk

xFolk is a developing microformat for open social bookmarks. From the docs:

Lack of an open, interoperable data standard is a major issue in using social bookmarking services. An open standard would make it possible to easily collect social bookmark data and remix it to invent new services … An open standard would also make it possible to write JavaScripts that work across services as some currently do for del.icio.us, enabling across-the-board improvements in user experience.

To implement xFolk, start by giving each bookmark wrapper a class of 'xfolkentry':

1	<li class="xfolkentry">
2	</li>

Then, insert the link and a description, giving them classes of 'taggedLink' and 'description', respectively.

1	<a class="taggedlink" href="https://code.tutsplus.com" title="Nettuts+">Nettuts</a>,
2	<span class="description">the best web development blog on the planet</span>.

Yup, simple; I can imagine this being useful on a blog roll, or in a web roundup. Think of a tool that would let you bookmark all of these links at once.

XFN (XHTML Friends Network)

XFN is a simple way to mark up human relationships. Using the rel attribute (which is short for relationship) on your links, you define your relationship with the owner of the page you're linking to. You can have a relationship with two parties: other people or yourself (well, your other pages). It's easy to define other pages you own:

1	<a rel="me" href="http://JohnDoe.posterous.com">My Posterous</a>
2	<a rel="me" href="http://www.flickr.com/JohnDoe">My Photos</a>
3	<a rel="me" href="http://twitter.com/JohnDoe">My Tweets</a>

Pretty simple, eh? rel=”me” and you're done.

Relationships with other people are a bit more detailed, but no more difficult: There are six categories you can take options from: friendship, physical, professional, geographical, family, romantic. I won't list them all here (a good idea would be to try the link creator), but here are a few examples:

<ul>
	<li><a href="#" rel="met friend">Good friend</a></li>
	<li><a href="#" rel="met muse spouse sweetheart">Darling wife</a></li>
	<li><a href="#" rel="met acquaintance neighbour">Guy next door</a></li>
	<li><a href="#" rel="friend co-worker">Co-worker at Envato</a></li>
</ul>

In the first link, you can tell from the rel attribute that I've met the owner of the page I'm linking to and that I am his friend. Next is my (hypothetical) wife, who happens to be my spouse and sweetheart, as well as someone who I have met and who inspires me. I've also met the guy next door, but he's only an acquaintance and neighbor. Finally, although my (again, hypothetical) Co-worker is a friend, notice that I've never met him; this would be described as a virtual relationship. I should point out that you shouldn't use XFN when just linking to a blog post or the like; use it when you're directly referring to a person, so there name is the text of the link, and the href goes to their home page.

VoteLinks

VoteLinks is an interesting idea: when you link to an article, posting, product, anything, add the rev attribute. Rev? Rev is the opposite of rel; while rel describes what the linked page is to current page (like a 'friend' or a 'stylesheet'), rev describes what the current page is to the linked one. With VoteLinks, you can make your page a 'vote-for', 'vote-against', or 'vote-abstain' whatever you are linking to. So, for example:

<p>Check our <a href="#" rev="vote-for">this great blog post by Collis</a> on the netsetter</p>

<p>I got terrible service at <a href="#" rev="vote-against">the Five Seasons Grill</a> last night</p>

<p>What do I think of <a href="#" rev="vote-abstain">his site redesign</a>? </p>

How is this useful? Well, imagine if Google (and other search engines) took VoteLinks into account when displaying items. Currently, their system (put very basically) is the more links, the more visibility on Google. But what if most of those links were votes against the product or page? Or how about a site that crawls the web looking for VoteLinks and shows you the general popularity of pages? It's all very speculative, but it could be interesting. The problem is, a lot of people need to be using VoteLinks for them to have any effect.

Geo

Geo is very simple; it has two properties: latitude and longitude.

1	<p class="geo"><strong>Apple :</strong>
2	(<span class="latitude">37.33171397409807</span>
3	<span class="longitude">-122.03051626682281</span>)
4	</p>
5	<p class="geo"><strong>Envato :</strong>
6	<abbr class="latitude" title="-37.812528">-37° 48' 45.1008"</abbr>
7	<abbr class="longitude" title="144.969076">144° 58' 8.6736"</abbr>.
8	</p>

As we've seen before, you can use the abbr element to mask the real values. And of course, Operator recognizes these.

rel-license

If you've ever released anything to the public, you know you need to put a license on it. You can give the rel attribute of a link the value of 'license' when linking to the license documentation.

1	<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

What's the point? Already Yahoo Creative Commons Search and Google Usage Right's Search both use the rel='licence' attribute in their algorithms.

rel-tag

This is an interesting one, because every blogger tags their posts. For this microformat, simply add rel=”tag” to your tag links and be done. Now, using our Operator add-on, we can see content from other sites with the same tags. It's important to note that the name of the tag is taken from the href of the link, and not the text of the link. So in the following example …

1	<a href="http://www.example.com/tag/javascript>Client-Side Scripting</a>

… the tag is 'javascript' and not 'client-side scripting.'

Nettuts has implemented this microformat; but you already knew that if you have Operator!

rel-nofollow

Another simple but hopefully effective tag: adding rel=”nofollow” to a link is designed to keep the link from having any affect on your page's ranking in search engines. Of course, the search engine has to implement this, and Google, Yahoo, and Bing already have. It would be ideal to add this to any links in blog comments, so that they wont' affect your site, and won't get any credit for their own.

So, What are you going to do?

We've briefly covered a healthy number of microformats; but the question remains: are they worth your time? Not until you start using them! Microformats are made to make page scraping for data easier, but until they're widely used, there won't be very many tools for them. Although a lot of these may seem pointless now, hopefully they will be everywhere in a few years. When that happens, the tools to make use of them will be available. Microformats are definitely worth your time: so easy, so inexpensive, so potentially powerful.

Will you implement microformats into your sites?

I've hidden a microformat in this tutorial; can you find it?