Microformats is a web technology that has existed for a few years, aimed at providing semantic markup using existing technologies in order to streamline the way content reaches users.  Given a webpage that uses microformats, a user with a browser capable of recognising them, can quickly obtain important information, such as a company's contact details, or details on an upcoming event, without having to scour a webpage to find them.  

An example is the best way to illustrate how this is done, and the process is surprisingly simple.  It is all based on the use of HTML tags - mainly class & rel.  So lets start with a set of contact details.

From the developer side, this is all that is required, the class names is what does the business.  Firstly, vcard is the set name for a what is essentially a business card.  So, the class vcard tells the browser (assuming you're using a browser that recognises it) that the information contained within this tag belongs to it. Each class tag from there is named according to the information within it.  So, 'fn' stand for Formatted Name, 'org' is Organisation name, and so on (There is a surprisingly large number of properties for the vcard type).

The way the user will see this information will vary depending on the browser or addon used.  In my case, I've used one called Tails (for Firefox) in the past.  Clicking on the Tails icon will bring up a sidebar on the left of the page, displaying the information for Joe Bloggs in a Business card looking image (shown below)

containing exactly the information that I entered above.  So you can see, if you have a large webpage containing contact information for your staff, or company, instead of the user needing to scour the page to find it, it becomes extremely simple and fast.  Even cooler than that, depending on the addon used, this information can be exported straight to an address book.

Currently there is a wide variety of data types that can be presented in this way.  Events information can be stored as a calendar item (which can also then be imported to calendar software or a diary), product information, news information, reviews, even resume's, to name a few.  There are more format types in development as well, including recipes & geography (co-ordinates, routes, etc).

Developers will recognise that this is something that is very easy to develop for, and will degrade between browsers gracefully.  Since there is nothing more than class names going on, there isn't anything for older browsers to fall over on.  One nifty feature I've discovered, is that these details can be stored within an element that is hidden (display:none), and the microformat addons will still pick up the information.  In addition to this, some search engines, Google for example, also pick up on the information in the microformats, and use them to populate search results - a great bonus for SEO.

While there are many advantages, microformats have their limitations.  They are based on existing HTML elements, but are, as such, limited by them as well.  For instance, some microformats use the 'abbr' element in such a way that it causes screen readers to not recognise these elements, which limits accessibility to many users.  The main attraction of microformats is that there is no additional language or server files required for them to work, so while microformats are not a perfect technology, there are certainly features that can be very effective in a variety of situations, which are easily implemented.

+ Back to blog home

Posted in: General