Tales of a Designer

The Basics of Microformats

For the last few months, I have been hearing a lot about microformats. When I first heard about them, it didn’t make much sense to me, but then when I started investing some time into it, it started to make a little more sense. Now, it’s quite an easy concept to understand, and can be extremely useful.

So what are microformats? The short version: microformats are semantic XHTML markup that allows other technology, or programs, to pull out information (or meaning) from the code. What’s useful about microformats, is that you aren’t having to learn another language, you are just extending the [already] existing XHTML markup.

How do you use microformats? The point of microformats is to describe information that can be extracted by external programs, therefore, the class for the tags used must accurately describe the information within them. One of the more common uses for this would be the hcard microformat, which is used for contact information. So my standard contact information looks something like this:

John Phillips
Web Designer
Tridea Design
jphill77@gmail

To start off, you will need to use the address element with a class=”vcard” so that the information can be imported into applications like Microsoft Outlook or Apple’s iCal. Microformats use class to give the particular element meaning. So here is what your markup might look like with my above information:

I had to use an image because WordPress would render the code

The markup is pretty easy to understand, and I have put the microformat classes in black to visualize it a little better. There are many more uses for microformats outside of just using them for contact information. With using the various classes, they are free for styling in your CSS as well.

I am still learning more about microformats, so I will be able to revisit this topic once I gain a little more knowledge about the topic. But if you would like to know more about it, visit the official microformats website to dig a little deeper.