Over the course of four days, I attended roughly twenty panels at SXSW Interactive. The discussions covered everything from online social networks for teens to a primer on the mobile web. One event really stood out for me, but it wasn’t the Mardi Gras atmosphere or the celebrity keynote speakers.
Tantek Çelik (Chief Technologist at Technorati) moderated The Growth and Evolution of Microformats. Microformats are a set of simple, open data formats that standardize the meaning of HTML content. Examples of content that can be used with Microformats include people, organizations, events, addresses and more. Many sites including Google, Upcoming, and Flickr are using microformats, and both Firefox 3 and Internet Explorer 8 will have built-in microformat readers. Until then, microformats can be read through the Operator and Tails Firefox extensions.
Formatting Your Data
Let’s use my contact information as an example where we will use the hCard format (a microformat that represents people, companies, organizations, and places). On my contact page, I posted my name and contact information. If this information is relevant to a user, they may copy it—line by line—to a contact list in Outlook, iCal, or a mobile device. By adding an hCard, this process is automated. The code looks like this:
<div id=”hcard-Brian-Peppler” class=”vcard”>
<a class=”url fn” href=”http://www.brianpeppler.com”>Brian Peppler</a><br />
<a class=”email” href=”mailto:brian@brianpeppler.com”>brian
@brianpeppler.com</a>
<div class=”adr”>
<div class=”street-address”>1514 17th St. NW #101</div>
<span class=”locality”>Washington</span>, <span class=”region”>DC</span>, <span class=”postal-code”>20036</span> <span class=”country-name”>USA</span> </div>
</div>
The result can be formatted in HTML like this:
Your contact information can also be formatted as a downloadable hCard
through the Technorati Contacts Feed Service.
This looks nice, but what good does it do? Aside from exporting the data to desktop applications, mobile phone browsers visiting this site can place a call to me directly from my microformatted content.
Additional Resources
Check out the Dreamweaver microformat extension and microformats.org help creating your own microformats.
