Microformats

Extending XHTML

Once you see how Microformats are created you'll find yourself saying "Well that was obvious". It's simple (unlike RDF). It works with todays technologies and most importantly it's not something that's reserved for the programmers of the world. If you've ever written HTML you'll have no problems understanding Microformats.

I wrote an ill fated magazine article about Microformats that gets more into depth about why I think they are a good thing for the web.

XFN (XHTML Friends Network)

You can read all about it here, but it's this simple

<a href="http://tim.example.org" rel="friend met">

I made an Tiki Wiki XFN Plugin to use with TikiWiki.

Votelinks

Here are the official guidelines, but the gist is easy enough to get from this example.

<a href="http://www.vim.org/" rev="vote-for">Vim</a>
<a href="http://www.gnu.org/software/emacs" rev="vote-abstain">Emacs</a>
<a href="http://en.wikipedia.org/wiki/Edit_(MS-DOS)" rev="vote-against">Dos Edit</a>

rel-tag

Here are the official guidelines again, but like Votelinks, rel-tag is easy to grasp with a simple example.

There are three hyperlinks. Each has a rel-tag of programming, xml and web-design, respectively. Notice how the anchor element text gives us a description of the tag, but the actual tag itself is determined by the ending of the href attribute text.

<a href="...blog/category/programming/" rel="tag">Programming</a>
<a href="...blog/category/xml/" rel="tag">XML</a>
<a href="...blog/category/web-design/" rel="tag">web design</a>

hCard

Here are the official guidelines again. hCard is bit more complex.

It's base off of the VCARD standard.

BEGIN:VCARD
VERSION:3.0
N:Stockwell;Bruce
FN:Bruce Stockwell
URL:http://brucestockwell.net/
ORG:Stockwell Information Services
END:VCARD

Now using the class attribute to create a basic hCard.

<div class="vcard">
    <a class="url fn" href="http://brucestockwell.net/">Bruce Stockwell</a>
    <div class="org">Stockwell Information Services</div>
</div>

A full blown hCard.

<div id="hcard-Bruce-Stockwell" class="vcard">  
    <a class="url fn" href="http://brucestockwell.net">Bruce Stockwell</a>
    <div class="org">Stockwell Information Services</div>
    <a class="email" href="mailto:bruce.stockwell@gmail.com">bruce.stockwell@gmail.com</a>
    <div class="adr">
       <span class="locality">Virginia Beach</span>, 
       <span class="region">VA</span> 
       <span class="postal-code">23454</span>
    </div>
    <a class="url" href="xmpp:bruce.stockwell@gmail.com">IM</a>
    <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a>
    created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>
</div>

This is an example of an hCard in a more prose like example.

<p class="vcard">Hello, my name is 
    <a class="url fn" href="http://brucestockwell.net">Bruce Stockwell</a>.
    I work for <span  class="org">Stockwell Information Services</span>.
    I live in the the Redwing  Neighborhood of
    <span class="adr"><span class="locality">Virginia Beach</span>,
    <abbr class="region" title="Virginia">VA</abbr>
    <span class="postal-  code">23454</span></span>
    If you'd like to contact me please feel free to 
    <a  class="url" href="xmpp:bruce.stockwell@gmail.com">IM</a> me or 
    <a class="email" href="mailto:bruce.stockwell@gmail.com">email</a> me.
</p>

Which, in a browser, would look something like this:

Hello, my name is Bruce Stockwell. I work for Stockwell Information Services. I live in the Redwing Neighborhood of Virginia Beach, VA 23454. If you'd like to contact me please feel free to IM me or email me.

hCalendar

Here are the official guidelines again. hCalendar like hCard is bit more complex.

It's base off of the iCalendar (RFC 2445) standard.

BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
URL:http://www.gordonbiersch.com/
DTSTART:20080324T023000Z
DTEND:20080324T070000Z
SUMMARY:My Fortieth Birthday Party
LOCATION:Gordon Biersch\, 4561 Virginia Beach Blvd\, Virginia Beach\, VA 23462
END:VEVENT
END:VCALENDAR

A full blown hCalendar.

<div class="vevent">
     <a class="url" href="http://www.gordonbiersch.com/">Gordon Biersch</a>
     <span class="summary">My Fortieth Birthday Party</span>: 
     <abbr class="dtstart" title="2008-03-24T18:00:00-05:00">
     March 24th 6:00pm</abbr> - <abbr class="dtend" title="2008-03-25T02:00:00-05:00">
     March 25th 2:00am EST</abbr>,
     at <span class="location">Gordon Biersch, 4561 Virginia Beach Blvd, Virginia
     Beach, VA 23462</span>
</div>

This is an example of an hCalendar in a more prose like example.

<p class="vevent">Please join me at <a class="url" href="http://www.gordonbiersch.com/">Gordon Biersch</a>
     for <span class="summary">my Fortieth Birthday Party</span>. 
     The festivities will start on <abbr class="dtstart" title="2008-03-24T18:00:00-04:00">March 24th at 6:00pm</abbr>
     and continue until <abbr class="dtend" title="2008-03-25T02:00:00-04:00">  2:00am the next morning</abbr>.
     Gordon Biersch is located at <span class="location">4561 Virginia Beach Blvd, Virginia Beach, VA 23462</span>
</p>

Which, in a browser, would look something like this:

Please join me at Gordon Biersch for my Fortieth Birthday Party. The festivities will start on March 24th at 6:00pm and continue until 2:00am the next morning. Gordon Biersch is located at 4561 Virginia Beach Blvd, Virginia Beach, VA 23462

Pretty ease once you get used to it. The kicker is that browser can now extract these Microformats and use them.

Created by: admin last modification: Saturday 29 of March, 2008 [17:45:10 UTC] by admin

source

history