Microformats? Are you pretty unsure of the word? Or you heard the term but not much familiar with the purpose. It is going to be a buzzword in the world of web design and development and the term really carries some bigger meaning than what it name suggests. As per the definition of microformats.org, the official microformat website,
“Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.”
Or in other words
“Microformats are simple conventions for embedding semantics in HTML to enable decentralized development.”
Or
“simple conventions for embedding semantic markup for a specific problem domain in human-readable (X)HTML/XML documents, Atom/RSS feeds, and “plain” XML that normalize existing content usage patterns using brief, descriptive class names often based on existing interoperable standards to enable decentralized developmentof resources, tools, and services “
In very simple way, you can use and encode additional semantics into the HTML of your web page. This gives your mark up a rating above traditional HTML. Like in a web page which displays upcoming events, if some additional semantics can be added up, then other services and softwares like calendar and personal organizer can extract data from the web page. As per web 2.0 standard, in XHTML, semantics can be embedded and encoded. And this done using special attributes like Class, Rel, Rev. Class is not any special attribute of CSS, but as per HTML standard 4, the class attribute is a general-purpose attribute for user-agents. Microformats are a perfectly acceptable use for the class attribute.
Lets consider an example. You want to display a contact information and a standard format is
<div>Your Name</div>
<div>Your Address</div>
<div>Your Telephone</div>
<div>Your Web URL</div>
With microformat hCard it becomes
<div class="vcard" >Your Name</div>
<div class="fn">Your Address</div>
<div class="tel">Your Telephone</div>
<div class="url">Your Web URL</div>
See a live example of hCard in wikipedia. In the above example the class name identifies the data type embedded in div tag. Similarly a typical iCalendar example is
BEGIN:VCALENDAR
PRODID:-//XYZproduct//EN
VERSION:2.0
BEGIN:VEVENT
URL:http://www.web2con.com/
DTSTART:20071005
DTEND:20071020
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel\, San Francisco\, CA
END:VEVENT
END:VCALENDAR
And the same in hCalendar format
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
You can get more information on microformats at
