Using microformats and hCard
After seeing microformats described with some passion by Jeremy Keith during the lunchbreak at d.Construct 2006 last week, I decided to add a simple hCard microformat to a couple of websites where it seeemed appropriate (this one included). I started with hCard creator and modified the resulting code accordingly to create an HTML snippet that I could use. A simple copy and paste and some stylesheet changes and I was done.
After doing this, I wondered whether I should validate my work. The Tails extension for Firefox detects a webpage containing a microformat by lighting up a microformat logo in the status bar. I'm not sure if this is 100% foolproof but I came away with a warm fuzzy feeling after seeing my newly microformatted webpages and the lit up logo. Yay.
Overall, my simple little example wasn't too scary. In future, I'll be keeping a watch for examples where microformats have been used, in particular to transfer data between websites.
PS Jon Hicks has published a nifty CSS method that highlights a webpage microformat for Safari and other Mac-based browsers.
Related Posts
Comments
In this Think Vitamin video, you'll get an introduction to wireframing. You'll learn about some of the differences between low fidelity wireframes and high fidelity mockups » UX Wireframing Introduction
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
