Using microformats to semanticly tag content

Published on
9,783 Points
4 Endorsements
Last Modified:
The past - html
In the early days of the Internet, html code was used to describe how the page should look more than it described the actual content. Some used a combination of the <font> tag and the <b> tag to make headings, others designed web pages using <table> tags -- while now most pages use <h1> tags for headings, and combine <div> tags and CSS for page design.

The present - xhtml
While more focused on content than html, xhtml still provides only a limited set of semantic tags, such as <h1> <p> <a> <abbr> <acronym> <cite> <code>. These tags add value to search result describing the type of content the tags contain, helping search engines such as Google to assess the relevance of the text. However, the tags do not describe things such as "what's at the other end of this link", "this is a street address", or "this is calendar info about an event".

The future - The semantic web
The past few years Web 2.0 has been a buzz word, introducing collaboration, interoperability, communities and focus on the end-user. The next "version", Web 3.0, will be all about the semantic web; how we can create and use mark-up code that describe the content of web pages, and how that content can be used to closer relate resources on the Internet.

Microformats are part of several other standards and technologies used to build the semantic web. Using attributes provided by standard xhtml, metadata can be added to links and other tags, precisely describing the content of that tag.

In other words: microformats tells your browser and Google that this next xhtml code from my personal web site is my contact information:  

<div id="hcard-Havard-Fjaer" class="vcard"> 
    <h1 class="fn">Håvard Fjær</h1> 
    <p class="adr"> 
        <span class="street-address">Svoldergata 2b</span><br /> 
        <span class="postal-code">0271</span> <span class="locality">Oslo</span></p> 
        <span class="tel">+47 99 44 99 59</span><br /> 
        <a href="mailto:havard@fjaer.com" class="email">havard@fjaer.com</a><br /> 
        <a href="http://www.fjær.no" class="url">http://www.fjær.no</a> 

Open in new window

In the code above, the hCard microformat defines tags describing my full name: class="fn"; address: class="adr", class="street-address", class="postal-code", span class="locality"; my phone number: class="tel"; etc.

It is not only search engines that are able to use this meta data:
 - The browser might add the contact information to your address book,
 - Skype might add a callto: link to my phone number,
 - or a LinkedIn plugin in Firefox might recognize the contact as a colleague of yours.

Other microformats such as XFN describe the relation of a link. For instance the link from my home page to my LinkedIn profile:
<a href="http://www.linkedin.com/in/havardfjaer" rel="me">LinkedIn</a>

Open in new window

... is tagged with rel="me", stating that the page is another page about me. Other keywords might be acquaintance, friend, co-resident, parent, etc. Based on these tags it is quite possible to build relation networks, describing how a person is related to others.

The microformats are not made for the end user, but for the developer and services that are able to read the formats. As of now there aren't too many services leveraging the potential available in microformats, but once there is enough content tagged out there, such services and applications will surely emerge, adding that extra value for the end user.

Read more about microformats at http://microformats.org

Håvard Fjær
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free