Using microformats to semanticly tag content

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="" class="email"></a><br /> 
                              <a href="http://www.fjæ" class="url">http://www.fjæ</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="" 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

Håvard Fjær

Comments (3)


I think this article is both informative and nicely focused.  Got my vote above.
Kevin CrossChief Technology Officer
Most Valuable Expert 2011

I second the motion.  Got my vote above as well.  Nice article, Håvard!


Thank you for your kind comments -- and for your feedback, WaterStreet and lherrou, when I was writing the article. This is my first article on EE, and I'm very impressed with the feedback and quality assurance you uphold. You really helped me add that little extra to the article.

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.