Friday, September 29, 2006

I've often been thinking that, since HTML is a markup language that is marking the content with semantic meaning -- like, that some text is a <p>paragraph</p> or a <h1>headline</h1> -- that other types of semantic meaning should also be possible to mark up. but the set of tags available in HTML is quite limited.

If, say, NNUG is publishing info on the next session that's scheduled for thursday in two weeks at HiA (the local college), they should be able to tag that date as a <date> and the location as a <location>. Like this:

Next NNUG session will be on 
<date utc="2006-10-12T17:15:00+01:00">thursday in two weeks</date> 
at <location>HiA</location>.

This way my browser would be able to understand the date and perhaps show me a tooltip where it has translated it into my local timezone and display format. And it would be able to add that information to my calendar application just like a vCalendar file, and I would be notified half an hour before so I could actually get there on time and not come tip-toeing in in the middle of the session and wonder why they're not using the frikkin projector. (Not that I use to be coming in late, I'm just making this up for effect, and they already have a .vcs file download for this).

Well, it turns out this is already possible. Not by introducing new tags like that, because that's just silly, and your strict xhtml wouldn't validate anymore. (You could ignore that and go back to html 4, but then height=100% would be working like it should, and we can't have that, can we?). But rather by allowing you to assign semantic meaning to existing tags. This is what they're calling microformats. So with this, that NNUG session info can be read as a vCalendar entry by the browser. To make it work you just add some span, div, abbr or whatever tags you like around the specific fields, and then use classes on them to indicate the field types. Quite elegant, really. So now that session info can be written like this:

<span class="vevent">
   <span class="description">Next NNUG session</span>
   will be on <abbr class="dtstart" title="2006-10-12T17:15:00+01:00">thursday in two weeks</span> 
   at <span class="location">HiA</span>.
</span>

With some plugin in your browser you can have it detect these microformats, and already a long list of services are supporting them.

If you want to style this with additional CSS classes, just list more than one class name in there separated by space. The only aber that I can see straight away is if you've already been using those class names for CSS styles, and now that description field looks really odd all of a sudden. Or you find you've got broken, unintended microformat definitions in your markup by accident. Plus the fact that everyone that's reading your fancy microformatted website needs to go and download that plugin before they get any use from it. But that'll change, soon, hopefully.