What are Microformats?

To start with, here’s my stab at a Microformats definition:“Microformats are bits of code you add to your XHTML markup to define a piece of text and by doing so you make that bit of text semantic.”

As you could see it doesn’t make much sense to the average punter. When I first looked into Microformats I noticed the apparent lack of good definitions. After further reading I could see why. Microformats are not easily defined in simple words due to the diversity of the concept, but in practise it’s very simple. Therefore the best way to teach someone Microformats is to show them some code.

Take a quick look at this simple Microformats hCard:

<div id="hcard-Ca-Phun-Ung" class="vcard">
  <div class="fn">Ca Phun Ung</div>
  <div class="org">Yelotofu</div>
  <div class="email">harvest-me@yelotofu.com</div>
  <div class="adr">
    <div class="street-address">X Street</div>
    <div class="country-name">Hong Kong</div>
  <div class="tel">+852 xxxx xxxx</div>

And the output looks like this

Ca Phun Ung
X Street
Hong Kong
+852 xxxx xxxx

It doesn’t look like much on the surface but that’s the whole point, Microformats do not interfer with your sites layout or typography. In essence, it’s much like XML but because we’re dealing with XHTML, self-defined tags are not supported so the class attribute is used instead.

Microformats are an intriguing progression towards the Semantic Web. This is an area I’m very much interested in so will continue to post my findings as I learn and progress along the Microformats highway. Stay tuned!

Comments are closed.