Thursday, October 05, 2006

Microformats - hCard

What is new on my blog today? I added my contact information into the template. Since I learnt more about microformats at the Web Directions conference, I used hCard microformat. No, you cannot see it as the style on that DIV is set to display: none and that means it's there but not visible.

If you have Tails or Tails Export extensions for Firefox or Flock browsers, you should be able to see these normally grey icons get some colors .

When you click on Tails you get

When you click on Tails Export you get

All I added was this:


<div class="vcard" style="display: none;">
 <a class="url fn" href="http://hanuska.blogspot.com/">Dushan Hanuska</a>
 <div class="adr">
  <span class="locality">Sydney</span>
  <span class="region">NSW</span>
  <span class="postal-code">2000</span>
  <span class="country-name">Australia</span>
 </div>
 <span class="geo">
  <span class="latitude">-33.879176</span>,
  <span class="longitude">151.212044</span>
 </span>
</div>

If you want to add your hCard onto your page, you can create one using hCard Creator. It's quite simple and gives only the basic options, but it's a good place to start.

1 comment:

Venu said...

This is one pending item that I should do on my site. Few months back when I had met Chris Messina and that was when I was introduced to hCard and other microformats :)

By the way you have nice blog going on here..you just added one RSS subscriber :)


Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.