The idea behind HTML microformats is to setup context for search engine crawlers. Microformats are a quick solution for marking up your HTML code referencing specific relations such as your address, job, or colleagues. Microformats are fairly old but still work great. Newer ideas are emerging quickly in the global development community which have become quite popular in recent years.

I want to dedicate this article as an introduction to microformats and microdata. Google does recommend using these formats in your HTML code if you want to increase SEO rankings. This is especially true for media content such as videos or images. Before diving right into the content let’s get a brief history lesson on these various topics.

Microformats vs Microdata

There have been a few different proposals over the years which have been followed by web developers. Microformats are the oldest and generally the most commonly known markup, although not used as much anymore. But they have paved the way for other methods using the newer microdata syntax(ex. schema.org).

If you’re interested in using this extra data for improving search results then it shouldn’t matter how you approach the topic. Google will continue to support both methods going forward. Although I would lean towards microdata only for the extensibility.

Microformats are built using HTML element classes. This means you setup the class name to a certain value – such as address or last-name. This is perfectly semantic but can get really messy if you need to apply 3 or 4 classes at once. The HTML microdata syntax uses its own attributes like itemprop and itemtype. Web developers may even create their own category for new microdata styles.

Intro to Microformats

A nice website to skim for information is the Microformats wiki page. This has published content on every topic you could possibly think about. Plus they have a brief introduction page which offers a lot of helpful info. Basically you can use microformats in your website to explain bits and pieces of your content.

This is achieved by adding classes and rel values onto your main elements. These values are used to describe real objects in a digital landscape. Consider some examples such as books, articles, podcasts, events, or even people. I love using microformats in cases where you already have decent markup(XHTML, XML, HTML4, HTML5) and want a simple method for adding more descriptive context.

I think the biggest reason developers would use microformats over the other choices is the simplicity. You will not have to learn a whole new set of attributes to embed into your HTML. All the codes are appended into elements you’re already familiar with.

Building Blocks for Media

I want to provide a simple example for readers who have never seen microformats in action. I’ll be referencing the hMedia draft from the Microformats website. Their page warning states that drafts are not officially part of the library and are still in the development process. This means you can use them in your website but should be on alert for changes in the future.

<div class="hmedia">
  <a rel="enclosure" type="image/jpeg" href="http://www.treeswing.net/index.php?showimage=355">
    <img class="photo" alt="Saturday Nights alright for fighting, by treeswing" 
     src="http://cache1.photoblogs.org/thumbnail/?hash=9bece0678c5610bd4b631d9037286df7&size=450"/>
  </a>
    <span class="fn">Saturday Night's Alright For Fighting</span>, 
    <em>by <span class="contributor vcard">
       <a class="url fn" href="http://www.treeswing.net/">Treeswing</a> 
      (<a class="url" href="http://www.photoblogs.org/profile/treeswing.net/">profile</a>)
    </span></em>
</div>

We can take a peek at the code above which is found on the media examples page. The hmedia class is the container for whatever media we need to display. In this scenario we’re linking to a photo online. You’ll notice how practically every element in the set is using at least one class value.

This is typically how microformats will render out in your HTML. Larger sections of the page are broken down based on the datatype, and you can obfuscate certain areas as needed. The easy nature of microformats allows you to pick and choose which content should be methodologically organized. I also have to agree that microformats are much easier to pickup in the short term.

Moving into Microdata

After skimming through a few articles online I came across this Google webmasters support article. You’ll notice that Google does specifically recommend using microdata out of all 3 choices(including RDFa). So I feel this article wouldn’t be complete without introducing the perks of microdata as well.

The largest benefit is how you’ll have access to a much wider library of data types. Defining page context is difficult if you are only following along with the accepted Microformats. The schema docs page has some links explaining various media types – all of which can be mirrored from Microformats.

As presented in the last section I want to offer another small code snippet of Schema microdata targeting an image. Instead of using a general media class the Schema docs use the ImageObject item. At the bottom of the page you’ll find the following code example:

<div itemscope itemtype="http://schema.org/ImageObject">
  <h2 itemprop="name">Beach in Mexico</h2>
  <img src="mexico-beach.jpg" itemprop="contentURL" />

  By <span itemprop="author">Jane Doe</span>
  Photographed in
    <span itemprop="contentLocation">Puerto Vallarta, Mexico</span>
  Date uploaded:
    <meta itemprop="datePublished" content="2008-01-25">Jan 25, 2008

  <span itemprop="description">I took this picture while on vacation last year.</span>
</div>

You’ll notice right away that we are using a whole slew of new attributes attached to container elements. Specifically itemprop is applied onto each element which contains related information. But since there are so many different options you have the ability to really customize your HTML markup. Image media objects even include some properties not found in microformats like the thumbnailUrl value.

Choosing your Markup Strategy

Overall you shouldn’t have immense difficulty taking either path. Both microformats and microdata are still supported and although Google/Microsoft/Yahoo! encourage Schema over the others, they will continue crawling all the various semantic metadata formats.

I feel the largest barrier of entry into microdata is the learning curve for newer developers. There are experienced web developers who have been coding for years and haven’t looked into the Schema documentation. Between all 3 options I would argue microdata with Schema.org are going to be around for the long haul. But if you don’t want to study this newer syntax RDFa and Microformats are both still great choices for improving your website’s search engine rankings.

Related Links

• Extending HTML5 with Microdata
• Microformats, HTML5, & Microdata
• Unobtrusively Mapping Microformats with jQuery
• Drive More Traffic with Google and Microformats
• How To Implement Video Microdata for Schema.org

Final Thoughts

I hope this article may behave as a digital guide for web developers just breaking into the topic. I cannot provide all the code samples here, but once you understand the basics it is much easier building onto newer projects. And the ideas presented here will likely carry over into other schema languages in the future. All-in-all microformats and microdata are both very helpful when writing semantic code. Check out a few of the related links and feel free to share any comments in the post discussion area.