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.