Article
About the Author
Brian Suda
Since discovering the Internet back in 1996, Brian Suda has spent a good portion of each day connected to it. His own little patch of Internet is http://suda.co.uk, where many of his past projects and crazy ideas can be found.
Microformats: More Meaning from Your Markup
You've probably heard the term "microformat" and assumed it to be part of some Web 2.0 flash-in-the-pan movement. But "microformat" is not just a fancy name or trademark -- it's part of a much bigger picture. So, what are microformats?
The official microformats.org web site defines microformats thus:
"Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards."
Through the use of these widely adopted standards, publishers can encode additional semantics into the HTML markup of web pages. This gives the pages meaning above and beyond the face value of the HTML elements, allowing them to be consumed, remixed, and mashed up. For example, by adding some semantic markup to a web page that describes an upcoming event, properties such as the event dates can easily be extracted and used by other services and software, like calendars and personal organizers.
Microformats are all about representing semantic information encoded within a web page, allowing that information to be leveraged in ways that were possibly never conceived by the original publisher. The idea to put more semantic information directly into HTML is nothing new -- people in the web industry have been discussing this concept for over ten years -- but, through the efforts of many volunteers, enough documentation, support, code libraries, and tools have been created to generate significant momentum behind microformats. The idea is finally becoming reality.
Now, if your eyes are glazing over and any further mention of semantics, encoding, data formats, or even standards will send you straight back to YouTube, just hold on. I'm going to demonstrate that using microformats is simplicity itself. It may only be as hard as adding a class name to a single HTML element. Trust me -- I'll show you how to get the most benefit from microformats with the least amount of effort.
Two of the most common forms of data being published using microformats are those relating to people and events, and I'll cover both in this article.
Paving the Cow Paths
To borrow an analogy from the microformats.org web site by way of illustration, it can be said that microformats attempt to pave cow paths. You see cow paths every day: outside libraries, in parks, and around colleges. People always cut the corners of paved paths, make their own paths, and generally flatten the grass along the way -- thereby revealing the path to the others who follow, like so many cattle. Instead of attempting to force people to follow the established paths, why not readjust the paved paths to follow the cow paths?
In this way, microformats allow people to use cow paths, or rather to leverage more value and meaning out of information already published. Microformats succeed because they don't force you to change habits: you don't need to change what you publish, only modify your HTML slightly.
Describing a Profile with Microformats
How many copies of your user profile exist on the web? Just about every site you've ever signed up to has a page about you, with your name, nickname, email, URL, and other basic contact information. With the use of microformats, we can make that information much more useful. Imagine being able to import your user profile from a web site into other applications without copying and pasting the text. Your profile could be aggregated across the Web to create an Internet-wide profile, saving you the trouble of having to sign up with the same data multiple times. Your friends could easily add you to their contact lists with a single click and effortlessly keep up to date when your details change.
Imagine no more! hCard is a microformat designed for just this sort of role, modeled on the widely adopted vCard standard. You mightn't know it, but your address book application has probably been importing and exporting vCards for over a decade now, while your mobile phone has been happily passing contact details around in vCard as well. There's no sense in reinventing the wheel if something already works well -- the hCard microformat benefits here, because anything that can read a vCard can easily read an hCard with only a little extra help necessary.
The hCard microformat is used to mark up people, places, and organizations. The only property of hCard that is required is a name; everything else is optional. This is an important point, because one of the other microformat principles is to not change the way people are already publishing. If you're not publishing telephone, email, or address information, then hCard doesn't force you to begin.
Let's have a look at a very simple example, an average blogroll of a list of friends and colleagues:
<li>
<a href="http://suda.co.uk">Brian Suda</a>
</li>
Our first addition to the HTML to create an hCard is to wrap all the data in a class called "vcard":
<li class="vcard">
<a href="http://suda.co.uk">Brian Suda</a>
</li>
"vcard" acts like a container, saying all the data inside this <li> element is data to be considered for this vCard.
Now, I'm sure some people will protest, "Hey, you're abusing the class attribute -- it's only for CSS!" This isn't true. According to the HTML4 spec, the class attribute is a general-purpose attribute for user-agents. Microformats are a perfectly acceptable use for the class attribute; the class attribute does not only apply to CSS.
The next step in our example is to mark up the name property in the <li>:
<li class="vcard">
<a href="http://suda.co.uk" class="fn">Brian Suda</a>
</li>
We've added a class value of "fn" to the <a> element. "fn" corresponds to the vCard value FN, which stands for "formatted name" and is used as the display name in many applications.
In our example, we can add some further semantics. We have a name, but we also now have a URL. So we can add a class of "url" to the <a> element as well:
<li class="vcard">
<a href="http://suda.co.uk" class="url fn">Brian Suda</a>
</li>
Now, I can hear you asking, "Can you have multiple values in a class attribute like that?" The answer is, "Sure!" The class attribute is very flexible, and you can add as many space-separated values as you want -- CSS classes or otherwise. This is perfectly valid markup for HTML and microformats.
So there you have it. With very little effort, we've now added an hCard microformat to our blogroll. If any microformat-aware software was to open our web page, it would be able to extract the full names and associated URLs of our contacts without ambiguity.
More information about hCards can be found at the microformats.org site. The site describes all the possible properties you can use to add semantics to the person, place, or organization. Some of these properties include addresses, telephones numbers, emails, web sites, and organizational roles. As a publisher, you can learn these properties and edit your HTML by hand, or use one of the helpful microformats creator plugins which add them for you. There are not many properties to learn and they are reasonably self-explanatory. There's also a cheatsheet to help you.