A Blog Not Limited

to web design, standards & semantics

Getting Semantic With Microformats, Introduction

Sep 05, 2008

Published in

I'm an organizer with a sometimes frustrating need to pay attention to the smallest details.

It shows itself in my home: my DVD collection of over 500 is organized alphabetically, as is what's left of my CD collection. I spend hours in iTunes assigning genres (because the defaults just aren't good enough for me) and creating playlists for over 10k songs. My books are organized by genre. My dresser drawers and closets are pristine. It is just me.

This personality "quirk" also shows itself in my web design work, which is valid, semantic and well-commented (most of the time). And it is one of the reasons I love what I do for a living.

Hand-coding XHTML and CSS requires organization and planning, especially to do it well. Even more, following web standards in this coding requires an even greater level of attention to detail, particularly regarding semantics.

Which is why I go gaga for microformats.

Microformats

What Are Microformats?

In short, microformats are simple, open data formats that are built on existing standards for markup and data. Designers and developers use microformats to add structure and meaning to web publishing by adding metadata and other attributes to existing (X)HTML elements.

What Do They Look Like?

A simple example of a microformat (though they are all, by nature, simple) is the rel attribute for links (<a>):

<a href="http://www.ablognotlimited.com" rel="home">A Blog Not Limited</a>

The above link markup includes rel="home", which indicates the linked page is the homepage of the site. This adds a bit more structure and meaning to the link with existing markup and attributes.

But this article isn't an explanation about microformats. If you need more background, go to the authority, Microformats, or Wikipedia.

So Then, What's This Article About?

Since starting development on A Blog Not Limited, I've identified a number of microformats that I wanted to use in my markup:

In the interest of sharing, I wanted to provide examples of these personal implementations. However, as I wrote this article, I realized it was much longer than I had originally expected. But I didn't really want to get rid of anything.

So, I decided to break it up into a brief series of articles about how I've implemented microformats on this blog. This introductory article is just that: an introduction to the series with a bit of background on microformats.

What to Expect

Each article in my Getting Semantic With Microformats series will cover a microformat I chose to use on A Blog Not Limited.

I will include markup samples, explanations of the elements and attributes used, and benefits of using each microformat.

I don't have a planned schedule for the articles, but I hope to publish at least one per week.

So, What's Next?

Getting Semantic With Microformats, Part 1 will detail the microformats for link-based relationships, including rel-home, rel-me, rel-tag and rel-license.

Part 1 is already 95% complete, so I will be publishing it soon. Until then …

Update: 9/22/2008

I recently discovered that Christophe Ducamp has translated this article in French: Parvenir à la Sémantique avec les Microformats – Introduction.

Unfortunately, I don't read French, so I can't attest to the translation. But in the spirit of spreading the good word about microformats, I'm going to promote the translation and hope it is accurate. The way I see it, the more people who know about microformats, the better.

Update: 11/04/2008

Jan Sládek has translated this article in Czech: Kódujme sémanticky s mikroformáty: úvod.

I don't read Czech either, so I can't speak for the translation. But the intention is good, so I'm promoting it.

Update: 11/27/2008

Jia Mi has translated this article in Chinese: 使用微格式来丰富网站语义:简介.

Update: 05/01/2013

Anja Skrba has translated this article in Serbo-Croatian: Semantika u mikroformatima, Uvod.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!

Tags:

Share the Love

Reinhard Borchardt's Gravatar

Reinhard Borchardt opines:

09/05/2008

I look forward to reading your work!

MJiA's Gravatar

MJiA opines:

11/26/2008

Hi, this is really a great series. I am now trying to translate them into Chinese, I hope I can get your permission to do this. You now can check out the introduction article translation on http://www.mijia.org/blog/?p=152

If there is anything improper, please let me know.

Emily's Gravatar

Emily responds:

11/27/2008

MJiA - Sure, I don’t mind if you translate the articles into Chinese. I don’t read Chinese, so I don’t have any comments on your translation.

If you email me links to your translations, and I’ll be sure to add them to each of my articles.

Thanks!

Andy's Gravatar

Andy opines:

03/12/2009

interesting - something else to watch!

Christopher Yeleighton's Gravatar

Christopher Yeleighton opines:

10/01/2010

So, where is the link[@rel=“next”]?

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.

More

I Tweet, Therefore I Am

Follow @emilylewis on Twitter!