Using microformats to semanticly tag content

Published on
9,608 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
LVL 18

Expert Comment

I think this article is both informative and nicely focused.  Got my vote above.
LVL 61

Expert Comment

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

Author Comment

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.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month