webdev blog carp fishing blog



Blog Roll
Jul 4, 2006

Microformats and hcards

Just recently I learned about the latest buzz in web development; microformats 

Now what are microformats, and why do I think they are here to stay?
Microformats are a way of applying semantic meaning to information while maintaining user visibility of that information at the same time. This can be done by means of using (microformats standardized) XHTML tags around information to be shown on a web page.

An example: everybody knows or at least has heard of vcards. Vcards are a structured, machine readable way of storing information about persons, like a visitor card. Vcards are a standard.
You can add a vcard to your emails or web pages, but you can not immediately review what's in it, because that info needs to be parsed by a vcard reader first and then shown to you, the viewer.

Now one of the micoformats standards are the so called hcards. They are the microformat representation of the same information stored in vcard, and one can extract a vcard from a hcard and vice-versa.

So when applying microformats to the contact information at your website, visitors machines can catch that information in a vcard, and store it for later usage!
There are a lot more micoformats of course, you can create hCalendar hCard rel-license rel-nofollow rel-tag VoteLinks XFN XMDP XOXO microformats, and in the near future also adr geo hAtom hResume hReview rel-directory rel-enclosure rel-home rel-payment Robots Exclusion xFolk formats, which are currently at the time of this blog being written in draft.

an extended example of microformatted information (My vCard as an hcard):

<div class="vcard">
<span class="n">
<span class="org">
<a class="url" href="http://www.miranet.nl">Miranet Webdesign</a>
<img class="logo" src=http://www.abc.com/pub/logos/abccorp.jpg
alt="my logo" /><br>
<span class="tel">
<span class="type">home</span>:
<span class="value">+31 (0)43 3630171</span>
(<abbr class="type" title="WORK">w</abbr>
<abbr class="type" title="VOICE">v</abbr>)
<span class="note">
lineoperational 0900 to 2000 CET, Mon-Fri.
</span>
</span>
<div class="tel">
<span class="value">+31 624 625 963</span>
(<abbr class="type" title="WORK">w</abbr>
<abbr class="type" title="VOICE">v</abbr>
<abbr class="type" title="MSG">m</abbr>)
</div>
<span class="category">INTERNET</span>,
<span class="category">IETF</span>,
<span class="category">INDUSTRY</span>,
<span class="category">INFORMATION TECHNOLOGY</span>
</span>
<span class="given-name">Vincent</span>
<span class="family-name">Bakker</span>
<span class="title">CEO</span>
<span class="role"><br>
Strategic manager, Web developer, project manager</span>
<!-- <img class="photo" src="portret.jpg" alt="" /> -->
</span>
<a class="email" href="mailto:vincent@miranet.nl">
<span class="type">pref<span>erred</span> email</span>
</a>
<span class="adr">
<span class="type">work</span> address
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<span class="street-address">Mgr. Soudantstraat7</span>
<span class="postal-code">6226 GC</span>
<span class="locality">Maastricht</span>
<span class="region">Limburg</span>
<span class="country-name"> The Netherlands</span>
</span>
<span class="geo">
<abbr class="latitude" title="50.504036">N 50° 50.4036</abbr>
<abbr class="longitude" titlea="5.432269">E 5° 43.2269</abbr>
</span>
</div>

There are no comments on this blog entry yet!

Send your comments to or post them right here!

name e-mail
comment title website url

Start > blog> webdev blog> microformats and hcards...

inloggen validate
x