Microformats | Jesse Frye

I really didn’t know much about microformats before Thomas gave me CSS Artistry by Andy Clarke. I couldn’t figure out why the author dedicated SO much attention to Microformats. I’ve learned they are great for CSS styling and for their main purpose, reusing HTML elements to convey metadata.

For example, the most common of microformats would probably be hCard. hCard is used for representing people or organizations and there are extensions or web services that can read an hCard and use the information for an Address book or something similar. There is also a rubygem called mofo which can parse the information of several microformats which you can do whatever with. The new microformat that I’m using with work is hProduct which should end up awesome. The resume page I put up also uses the hResume microformat.

They are also dead simple to use. You just add CSS classes to HTML elements like this:

<div class="hResume">
<div class="contact vcard">
<div class="fn n" id="j">
<span class="given-name">Jesse</span> <span class="family-name">Frye</span>
</div>
<ul>
<li>Email: <a class="email" href="mailto:johnny@appleseed.com">#</a></li>
<li>Personal: <a class="url" href="http://jessefrye.com">http://jessefrye.com</a></li>
<li>Latest Project: <a class="url" href="http://137clothing.com">http://137clothing.com</a></li>
</ul>

Tags: css, hcard, hproduct, hResume, microformats, mofo

KrisBelucci

I really liked this post. Can I copy it to my site? Thank you in advance.

Jesse

Of course. Look up Jay Myers for more related posts at: http://jay.beweep.com/

It's really exciting that Google is using Microformats in their search engine now. I was going to do another updated post about that as well.

Alan Hogan

Microformats are a great idea. But one of the most common microformats - the date microformate based off vCal / iCal - requires ugly machine-readable dates to be set as title attributes, which is an accessibility problem (screen readers read titles instead of abbr content) as well as just plain ugly for visitors (some WILL mouse over it, if not all).

The microformats community's (who am I kidding – @t and @adactio) refusal to acknoledge this problem, though they are well aware, is discouraging.

Jesse

I agree. I believe they have potential when implemented but perhaps in the future being able to parse out or take whatever pertinent information you need will be used. For example, you are searching for a shirt and google crawled for the hProduct spec to find 137clothing. Still would have to work for the top ranking but it could make searches for specific. Same case with hCard to search for people, hResume for headhunters to search for candidates, et cetera. I think a lot of cool stuff CAN come from it but might be a ways down the road. For now, its good for formatting, CSS, and dreaming!