Microformats: embedding information in webpages the right way

Armijn Hemel, April 14, 2009, 6138 views.

Tags: , , , , , ,

Markup and content on webpages are often not very well separated resulting in that the same type of information, like address information, is represented in a lot of different ways on different sites. This is annoying, because you need to look in different places every time for the same type of information and it is never where you expect it to be.

With minimal effort you can make this information available to people who want quick access to the information, without having to make dramatic changes to your website. The solution is called 'microformats'.

Microformats are implemented using a minimal extension to HTML, with which you can indicate that information in some HTML tags should be treated in a special way. These specially marked tags can be recognized easily by the browser, or a search engine, who can treat the information in the tag in whatever way they like. For example, a browser can be instructed to export contact information to a vCard, to use geo information to lookup locations on Google Maps or Yahoo! Maps, and so on. Search engines can better extract information from your page and improve search results (at least, that is what you want).

Various microformats have been invented. Support for these microformats varies per browser and search engine. All microformats in this article can be viewed with the Operator extension for Firefox.

Microformats are used in more and more sites, like Wikipedia (contacts and geo information), LinkedIn (contacts) and Yahoo! (reviews).

Contact information

On a company's webpage you can often find various e-mail addresses, phone numbers and addresses of people and departments. You could of course manually copy and paste these contacts into the contact list of your PIM program (like Evolution), but this is often quite a bit of work.

It is even unnecessary, if the website would use the hCard microformat, because the information would be already in a ready to use format on the page:

<div class="vcard">
 <div><span class="fn">Example Inc.</span></div>
 <div>Tel: <span class="tel">555-5555555</span></div>
 <div>e-mail: <a href="mailto:example@example.org">
   <span class="email">example@example.org</span></a>
 </div>
</div>

The Operator extension would recognize this information and turn it into vCards (hCard was heavily influenced by vCard). Most PIM programs can read vCard files.

Geo information

Websites such as Google Maps and Yahoo! Maps are very popular. It is incredibly easy to use and navigate maps and to look up geographical coordinates. These coordinates can be caught in a microformat too. Flickr (owned by Yahoo!) allows geotagging of photographs. Microformats are used for this. The Operator extension can perform lookups on Google Maps or Yahoo! Maps using coordinates extracted from a page that uses microformats.

A geocode consists of two components: longitute ("lon") and latitude ("lat"). In the geo microformat these can be represented in various ways. One common format is to concatenate the coordinates:

<abbr class="geo" title="52.090529;5.121134">Als ik bovenop sta</abbr>

or to seperate specify lat and lon:

<div class="geo">
  <span class="latitude">52.090529</span>
  <span class="longitude">5.121134</span>
</div>

Browser support

Support in Firefox is pretty good if you install the Operator extension. It was originally planned for Firefox 3 to have integrated microformats, but there was no agreement on how they should be presented to the end user, so it was decided that if you want to use microformats in Firefox 3 a seperate extension, like Operator, would be the best choice. At Mix'06 Bill Gates said that Internet Explorer 8 would support microformats.

More information

Two recommended resources are the Microformats website and the book Microformats - empowering your markup for Web 2.0.

Social networking: Tweet this article on Twitter Pass on this article on LinkedIn Bookmark this article on Google Bookmark this article on Yahoo! Bookmark this article on Technorati Bookmark this article on Delicious Share this article on Facebook Digg this article on Digg Submit this article to Reddit Thumb this article up at StumbleUpon Submit this article to Furl

Talkback

respond to this article