Unintentional side effects of using microformats

Joor Loohuis, April 13, 2009, 4334 views.

Interpreting a website using microformats semantics has consequences for webdesigners and webdevelopers, even if they don't intentionally use them. Certain markup is assumed to have a specific meaning, which may result in functional and presentational side effects. Therefore, designers and developers should be aware of the syntax of microformats, and avoid it if the semantics are not applicable.

Tags: , , ,

Before we delve into the details, it is useful to explain what microformats are to anyone involved in producing markup for websites, who is not yet familiar with them. Microformats are part of a general trend in web development, with the goal of making marked up text easy to 'understand' for machines, and not just people. By providing semantics (the actual meaning of specific content), systems like browsers, search engines, and other software that processes the content, can determine the meaning of marked up information, and do clever things with it. For example, if the geographic coordinates of a location are provided, a search engine may be able to draw a map with an indicator at the right location, or even provide travel directions. Various other forms of information also benefit from being marked up semantically.

Causes of side effects

Microformat markup uses regular HTML syntax to specify the semantics of certain content. Since no new markup is introduced, it is possible that markup is used that is inadvertently interpreted as a microformat by software that supports it. The cause of this unintentional interpretation is typically one of:

  1. A poor implementation of microformats in software, that incorrectly identifies microformat markup. This is typically a matter which should be addressed by the creator of the software, and is not relevant to this article.
  2. Actual use of microformats of which the designer is not aware, that assigns incorrect semantics to content, resulting in problems with the interpretation of the content.

Microformat markup

In the context of this article, there are two general forms of markup used in microformats that webdesigners should be aware of. On the one hand there are microformats that use the rel attribute on links (<a> elements), and interpret the link in a specific way. It is unlikely that these attributes will be used in any way other than to assign semantics to the link. On the other hand are a collection of class names that have been chosen as a convention, that may be used by an unsuspecting webdesigner, and which may be interpreted by a microformat processor. Below is a list of classes that add semantics to markup, and therefore should be avoided unless the semantics are intentional:

vcalendar, vevent
The element and its children contain calendar and event information.
The element and its children contain contact information for people and organizations.
The element and its children are a XOXO data structure. XOXO is a simple, open outline format written in standard XHTML and suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML. An element with this class name requires a structure of specific child elements to be useful.

A point of contention lies in the existence of draft microformats, which have been proposed, but are not yet part of the set of stable specifications. Designers may choose to ignore these, but they may cause misinterpretation of semantics in the future, and I recommend avoiding these too:

The element and its children contain address information.
The element and its children contain a geographic location in WGS84 coordinates.
The element and its children contain information on an audio recording.
The element and its children contain information on a product.
The element and its children contain information on a recipe for human edible food.
The element and its children contain information on a resume or CV.
The element and its children contain information on a review of a product, service, event, etc.
The element and its children contain information on a link, as part of a link collection, specified by xFolk.

The lists above only mention the so-called root classes, the class names that identify an element as a microformat. With the exception of xoxo, all the microformats mentioned above specify additional class names that only have semantics in the context of the root element, and these should be harmless outside of the microformat context. Therefore these are not mentioned, but all details can be found in the specifications.

How to check for microformats

There is an addon available for Firefox, named Operator, that adds support for microformats. It will indicate if any of the microformats supported by Operator are detected on a webpage and allow you to interact with them in various ways, including debugging them. Operator is available through the built-in addon manager.


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


respond to this article