Web Development

Microformats – Seeing What’s Next For The Web

Update (8/15/2005 @ 11:30 am): I’ve made some changes to my hcard example below after receiving some feedback from Brian Suda, who’s written a cool little tool that extracts hcards from web pages. Thanks Brian!

There are tons of really exciting things happening in web design and development right now – it’s a great time to have my job. One of the biggest trends we’re seeing right now is a move to what some are calling Web 2.0. A good description of Web 2.0 be found in this Wikipedia article if you’re curious).

One of the things we’re now seeing is the desire to convey deeper meaning about content that is useful to both humans and machines. The technical name for this is called metadata: data about data. One ongoing project, the Semantic Web, is being lead by the creator of the web himself, Tim Berners Lee. Problem is, the whole thing is committee driven and based on complex descriptive languages with names like RDF and OWL.

Seeking simplicity instead of complexity, a group of companies and developers are taking a different route – one that doesn’t require learning a new language or waiting for new development tools to be created. This summer they released several really cool specifications called microformats. They give meaning to data by using plain and simple HTML – the same stuff you’ve been reading on the Web for over 10 years. As an example, here is my contact information for work in the hcard format for contact information:


EduTech – Education Technology Services
314 Cambridge St.

Grand Forks,


Here is what you’d see if you looked at the HTML code for this page:

<div class="vcard">
<a class="url fn" href="">
<span class="fn n">
<span class="given-name">Jason</span>
<span class="family-name">Berberich</span>
<div class="org"><span class="organization-name">EduTech - Education Technology Services</span></div>
<div class="adr">
<div class="street-address">314 Cambridge St.</div>
<span class="locality">Grand Forks</span>,
<span class="region">ND</span>
<span class="postal-code">58202</span>
<div class="tel">701.777.2094</div>
<a class="email pref" href="mailto:[email protected]">contact me</a>

With the knowledge of how an hcard is constructed, a computer can easily take that information and convert it to a vCard or use it in more creative ways. The important thing is that developers can start using the microformats now with skills they currently have. Very simple, but very powerful!