Article updated 2025-02-05.
Written by Christofer Sandin.

This is an older article, so some references and links may be outdated. Keep that in mind while reading. Thank you!

Structured Information with Microformats

By marking up your HTML code with specific classes, you add semantic meaning and enable computers and systems to understand what you are describing on the web.

In addition to Microformats, which we will look at here, there are a couple of other standards that do roughly the same thing. The most common alternatives today are JSON-LD, HTML Microdata, and RDFa. Google supports all three of these standards, for example.

Conceptually, they work in roughly the same way, so in that regard, you will hopefully get something out of the article even if you prefer to work with one of these other two standards.

Tip! At schema.org, there are standardized schemas for Microdata for many of the most common things you want to mark up.

What are Microformats?

Today, there are a few programs and web pages that truly utilize microformats, but in the not-too-distant future, there will likely be even more smart and sensible ways to leverage all the information that is already out there. Do you want an address book that updates itself? Do you want search engines to understand what is what on your website? We are already on our way there.

It can hardly have escaped anyone interested in web design and development that it is now important to build websites using web standards. In the same ruthless way that the steam engine was replaced by the electric motor, web design with table-based layouts, font tags, and transparent 1px GIF images has been supplanted by responsive CSS and external JavaScript in recent years.

Developers validate their HTML and CSS and use tools like jslint to write better JavaScript, all to build better websites. In addition to this, more and more clients are demanding that websites be accessible to all types of visitors, which means we have really raised the bar in recent years.

On top of all this, we have the mobile web; today, many expect that they can use their mobile phones to browse the web on the bus home from work or on the way to training. Information is becoming both more accessible and mobile, so what can we do to build an even more robust web?

Information on the web must be easier to interpret

To meet all these requirements and desires, it is very important that the information on the web is easy to understand. This applies not only to us humans, but our everyday lives become much simpler if computers can also interpret the information and relate it to what is actually being described. The idea behind microformats is to use regular HTML and CSS to mark up information on the web to achieve just this.

As mentioned at the outset, there are other similar standards like microdata and RDFa, but the concepts are the same as for microformats, even though the syntax and markup are different. Google, for example, has a good introduction to the concept, which they generally refer to as Rich Snippets, on their website “Webmaster Tools”.

Microformats allow you to specify what type of information is represented on your page, and it is actually not particularly difficult to implement.

Microformats interest many, and it took over three years before Microsoft even officially recognized a technology like RSS, but just months after the first microformats were presented, Bill Gates was talking about them in an opening speech at a major developer conference.

It is also becoming a bit trendy to use microformats, but that is not why you should start implementing them; it is because this may be the beginning of a series of really smart applications that would make everyday life easier for many of us.

What would you say if your address book kept track of when your customers and colleagues changed mobile numbers or addresses? Or how would you feel if you could always have accurate information about that conference you are going to in two months in your calendar?

We are not quite there yet, but it is not far off…

Publish Contact Information Using hCard

Let’s say you want to publish your contact information on the web. With the help of microformats, you can mark this up so that others can easily see that it is contact information. Right now, you can import this into your address book thanks to a format that has existed for a long time — vCard.

vCard is a standardized format for exchanging contact information between, for example, your computer's address book, mobile phone, and iPad. With the help of microformats, you can mark up your information as an hCard (which is the microformat based on vCard).

An example is our contact information here on the website:

<p class="vcard">
  <span class="fn">Christofer Sandin</span>,
  <span class="org">
    <a href="http://www.republic.se/" class="url">Republic Factory AB</a>
  </span>
</p>
<p class="adr">
  <span class="street-address">Korsgatan 12</span>,
  <span class="postal-code">411 16</span>
  <span class="locality">Gothenburg</span>
</p>
<p>
  <span class="tel">Tel: <span class="type">work</span>
  <span class="value">031-7112620</span>
</p>

Here are my contact details marked up according to the standard described at hcard/microformats.org/wiki/hcard/ - if you check the source code on the contact page, there is also a link to Technorati's service that converts this HTML code to a vCard. Unfortunately, it does not always work flawlessly with our Swedish characters å, ä, and ö (even though it is encoded with UTF-8), so we should probably build our own soon… but you get the idea.

In addition to hCard, which is usually the standard example in most introductions I have read, there are actually a number of other quite interesting formats.

Mark Up Calendar Data with hCalendar

hCalendar is used to mark up events, i.e., calendar data such as conferences, meetings, and other events that are governed by time, date, and location. Imagine how convenient it would be if iCal or Outlook could subscribe to the information instead and always keep the calendar updated.

Here is an example, taken from microformats.org/wiki/hcalendar/, of a conference marked with hCalendar:

<span class="vevent">
  <a href="http://www.web2con.com/" class="url">
    <span class="summary">Web 2.0 Conference</span>:
    <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
    <abbr class="dtend" title="2005-10-08">7</abbr>, at the 
    <span class="location">Argent Hotel, San Francisco, CA</span>
  </a>
</span>

Define a License with rel-license

rel-license is a way to specify what type of license applies to published material. For example, you can mark up that a page with icons is published under Creative Commons, a license that allows the material to be used in other contexts, so that anyone looking at your icons knows that it is okay to use them in their own projects.

Even the big players utilize rel-license - Yahoo already has a search engine that searches among material with Creative Commons licenses.

It is the rel attribute in the a tag that is set to “license” (hence the name rel-license), and the link is added to the pages for which the intended license applies:

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

Tag Information with rel-tag

Tags have become a very popular way to mark up and categorize, for example, articles, links, and blog posts.

Services like Flickr, Wikipedia, and delicious all use tags and the microformat rel-tag.

Here’s how to mark up a link with the tag “microformats” on Technorati:

<a href="http://technorati.com/tag/microformats" rel="tag">
  microformats
</a>

Mark Up Friends and Colleagues

X.F.N. stands for XHTML Friends Network and is also an auxiliary attribute to give links a more meaningful significance.

This is a way to indicate what your relationship is to the person you are linking to. For example, you can specify whether you have met the person, if they are a friend, an acquaintance, or a colleague in the same industry. But there are also ways to describe your romantic feelings (such as a partner) and family relationships (siblings, parent, etc.). A complete list of all the values that the rel attribute can take is available at http://gmpg.org/xfn/11.

Here is an example of how this can be used on professional websites to link to colleagues, for example:

<a href="http://www.republic.se" rel="co-worker colleague met">
  Republic Factory
</a>

There’s More...

These are some of the microformats that are already specified, but there are many more interesting variants under development.

Among other things, there are microformats for marking up syndicateable material (for example, blog posts published via RSS), you can use hReview to mark up a review of something, or use hResume to publish your CV on the web.

So why not start using microformats today? Tomorrow, someone may have developed a search engine for book reviews or a system to locate where potential colleagues (or competitors) within the same industry are located.

Or as Paul Boag reasoned in one of his podcasts; considering the return-on-investment that comes from implementing microformats, it is not justifiable to clients to refrain from doing so. Microformats require relatively little extra development time and can open many doors in the future.

Links and References

In conclusion, I would like to publish a collection of links to pages that are interesting if you want to delve deeper into microformats. There are also links to plugins for Firefox that notify you when you are on a page that contains microformats and allow you to utilize them for various purposes.