This is a new way of thinking about your data. Microformat are small patterns of HTML/XHTML to represent commonly published things like people, events, blog posts, reviews and tags on webpages. Search engins and browsers use the small snippets of code for a few different things. I’m going to go through a couple of the different microformats in this blog post. You can read more about it on the microformat.org website.
The purpose of using microformats is to solve a specific problem. It is basic semantic HTML/XHTML, so you can enhance your excisting website with minimal effort.
Search engine gets help from the microformats to determine what kind of content it is reading. Formats like hCard and hCalendar have nativ support in browsers like Firefox and Opera. Devices like iPhone can take advantage of contact information if you use the appropiate microformats.
hCard
hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML.
Quote from Microformats.org website.
Here is the html markup for my personal hCard.
<div id="hcard-Kenneth-Dahlstrøm-Nordahl" class="vcard"> <span class="fn n"> <a class="url" href="http://nordahl.me"> <span class="given-name">Kenneth</span> <span class="additional-name">Dahlstrøm</span> <span class="family-name">Nordahl</span> </a> </span> <a class="email" href="mailto:kenneth@nordahl.me">kenneth@nordahl.me</a> <div class="adr"> <span class="street-address">Fredriksfrydveien 1</span> <span class="postal-code">1792</span> <span class="locality">Tistedal</span> <span class="country-name">Norway</span> </div> <div class="tel"> <dt>Phone (<span class="type">Cell</span>):</dt> <dd><span class="value">+47 45432614</span></dd> </div> <a class="url skype" href="callto://kdnmedia">Call me on skype</a> <a class="url aim" href="aim:goim?screenname=kenneth@nordahl.me">IM with me</a> <a class="url msn" href="msnim:chat?contact=kenneth@nordahl.me">Add me to your msn</a> <a class="url" href="kdn.vcf"><img src="download.png" alt="download" class="download" /></a> </div><!-- end of hCard div -->
As you can see the only thing you have to do to add this to your site is adding some class and rel attributes. I’m not going to bother explaining each line since they are pretty self explainary.
Just a little bit of css to make it pretty.
/*
hCard STYLING
*/
body { background:url(body-bg.jpg) no-repeat #000; background-position:50% 50%; }
.vcard { position:relative; width:235px; height:136px; background:url(kdn-hcard-bg.png) no-repeat #000; margin:100px auto; padding:10px; -webkit-box-shadow:2px 2px 8px #000; -moz-box-shadow:2px 2px 8px #000; box-shadow:2px 2px 8px #000; }
.vcard .download { position:absolute; right:8px; bottom:8px; }
.vcard .given-name,.vcard .additional-name,.vcard .family-name { display:block; float:left; margin-right:3px; margin-bottom:10px; }
.vcard .email { display:block; float:left:; margin-top:10px; margin-bottom:10px; }
.vcard .tel { margin-top:10px; }
.vcard .postal-code,.vcard .country-name { margin-left:45px; }
/*
TYPGROGRAPHY
*/
/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }
body { color:#aaa; font-family:Helvetica Neue,Helvetica; font-size:10px; text-shadow:1px 1px 2px #000; }
a { color:#fff; text-decoration:none; font-style:italic; }
a:hover { text-decoration:underline; }
.given-name,.additional-name,.family-name { font-family:DiavloLight, Helvetica Neue,Helvetica; font-size:14px; }
.license { font-family:DiavloLight, Helvetica Neue,Helvetica; text-align:center; font-variant:small-caps; font-size:12px; text-shadow:1px 1px 2px #000; }
XFN – Xhtml Friend Network
This is used to define links between peoples websites. You can link to your friends/relatives/acquaintances/people you met with the [code]]czo2OlwicmVsPVwiXCJcIjt7WyYqJl19[[/code] attribute. If all the people in your network use this you get a map of your relations.
<a href="http://jane-blog.example.org/" rel="sweetheart date met">Jane</a> <a href="http://dave-blog.example.org/" rel="friend met">Dave</a> <a href="http://darryl-blog.example.org/" rel="friend met">Darryl</a> <a href="http://adam-blog.example.org/" rel=co-worker friend met">Adam</a> <a href="http://www.metafilter.com/">MetaFilter</a> <a href="http://james-blog.example.com/" rel="met">James Expert</a>
Derative of example code from gmpg.org
You can style the links with the attribute selector syntax in CSS2.1+ aware browser.
a[rel~="friend"] {font-weight: bold;}
a[rel~="co-worker"] {text-decoration: underline;}
a[rel~="acquaintance"] {font-style: italic;}
a[rel~="sweetheart"] {font-style: italic;color="red";}
Derative of example code from gmpg.org
hCalendar
hCalendar is a simple, open, distributed calendaring and events format, using a 1:1 representation of standard iCalendar (RFC2445) VEVENT properties and values in semantic HTML or XHTML.
Quote from microformat.org
Here is an event from my iCal
[code]]czozODM6XCINCkJFR0lOOlZDQUxFTkRBUg0KQkVHSU46VkVWRU5UDQpVSUQ6MDU2NDcxQTItQkRCOS00MjJCLUI5REUtMDE0NjlENEN7WyYqJl19NDA1NQ0KRFRTVEFNUDoyMDA5MTAwNFQxOTM1MjhaDQpERVNDUklQVElPTjpQZWxsZW50ZXNxdWUgaGFiaXRhbnQgbW9yYmkgdHJpc3tbJiomXX10aXF1ZSBzZW5lY3R1cyBldCBuZXR1cyBldCBtYWxlc3VhZGEgZmFtZXMgYWMgdHVycGlzIGVnZXN0YXMuDQpTVU1NQVJZOkxhdW5je1smKiZdfWggb2YgcHJvamVjdCBYDQpMT0NBVElPTjpodHRwOi8vcHJvZHVjdHMubm9yZGFobC5tZQ0KRFRFTkQ7VFpJRD1FdXJvcGUvT3Nsbzp7WyYqJl19MjAwOTEwMDZUMTYwMDAwDQpEVFNUQVJUO1RaSUQ9RXVyb3BlL09zbG86MjAwOTEwMDZUMTIwMDAwDQpFTkQ6VkVWRU5UDQpFTkQ6VntbJiomXX1DQUxFTkRBUg0KXCI7e1smKiZdfQ==[[/code]
This could look something like this in the hCalendar format.
<div class="vevent"> <h3 class="summary">Launch of project X</h3> <p class="description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>To be held on <abbr class="dtstart" title="2009-10-06T12:00:00+02:00">October 6th, 2009 from 12:00pm CET</abbr> until <abbr class="dtend" title="2009-10-06T12:16:00+02:00">4:30pm CET</abbr></p> <p>Location: <span class="location">http://products.nordahl.me</span></p> <small>Created by: <span class="uid">Kenneth D. Nordahl</span> on <abbr class="dtstamp" title="20091004T193528Z">October 4th, 2009 9:55pm CET</abbr></small> </div>
There is no specifications on how you convert from iCalendar to the hCalendar format. You would have to convert the time from the format used in iCalendar to the format used in hCalendar.
VoteLinks
This is used on links to vote the related content either up or down. Another way to use VoteLinks is on polls.
<h1>Do you like this post?</h1> <a rev="vote-for" href="http://example.com/yes" title="I like this post!">Yes!</a> <a rev="vote-against" href="http://example.com/no" title="Its useless!">No!</a>
rel="license"
This microformat is used to mark the license links on a page. You could specify several licenses on one page.
<p>The content on this site is protected with a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/no/deed.en" rel="license">CC by-nc-sa 3.0</a> license if it isn't cited. </p>
rel="tag"
You can add the [code]]czo5OlwicmVsPVwidGFnXCJcIjt7WyYqJl19[[/code] attribute to a hyperlink. This indicates that the destination of that hyperlink is an author-designed "tag" (or keyword/subject) for the current page. You could add several tag links to one page. If you use wordpress the [code]]czoxNTpcIndwX3RhZ19jbG91ZCgpO1wiO3tbJiomXX0=[[/code] function add the tag attribute automatically.
<a style="font-size: 10.8pt;" rel="tag" title="3 topics" class="tag-link-96" href="http://blog.nordahl.me/tag/css3/">css3</a>
There is are a couple more minor microformats on the microformat.org website. The one mentioned in this post is the most used microformats. Twitter is one of the major sites who have taken advantage of both XFN and hCard.