Drew has written up the process of adding hCard to Vitamin. To view the results in action, try visiting Vitamin using Firefox with the Tails extension installed.
Drew explains what prompted the conversion:
Something struck me about the site as soon as I saw all the list of advisors. It’s the perfect candidate for exuberant use of the hCard microformat, so I dropped Ryan Carson a line and made the suggestion.
I recently had a similar satori. On every page of this site, there’s a little explanatory blurb in the sidebar:
Adactio is the online home of Jeremy Keith, a web developer living and working in Brighton, England.
This used to be contained in a simple paragraph element:
<p>Adactio is the online home of Jeremy Keith, a web developer living and working in Brighton, England.</p>
I noticed that this little paragraph contained:
- my full name,
- my profession,
- my town and
- my country.
<p>Adactio is the online home of Jeremy Keith, a web developer living and working in Brighton, England.</p>
This information is easily encoded in hCard:
<p class="vcard">Adactio is the online home of <span class="fn">Jeremy Keith</span>, a <span class="title">web developer</span> living and working in <span class="adr"><span class="locality">Brighton</span>, <span class="country-name">England</span></span>.</p>
Bam! Instant semantic richness.
I could have stopped there but I decided to go a little further and add a URL and email address:
<p class="vcard"><a class="url" href="http://adactio.com/">Adactio</a> is the online home of <a class="email fn" href="mailto:jeremy@adactio.com">Jeremy Keith</a>, a <span class="title">web developer</span> living and working in <span class="adr"><span class="locality">Brighton</span>, <span class="country-name">England</span></span>.</p>
This got me thinking about other places where microformats can be insterspersed in the flow of natural English sentences. I updated the author page over on the DOM Scripting site (there’s already an hCalendar of events). Speaker bios on conference websites would be another prime candidate.
I borrowed an idea from Andy Hume and started marking up comments as hCards on DOM Scripting and Principia Gastronomica. Once I started looking for it, I started seeing identity and event information in lots of places… even when it doesn’t explicitly look like cards or calendars.
The next time I’m writing or marking up some copy, I intend to sniff it for names, contact details, dates, etc. I hope to develop a nose for microformats.