Nav & Search

Microformats vs. Microdata

Web Development

I first read about Microformats in the summer of 2010 and since I also run a food blog (The Cheap Gourmand) I got all excited about the possibilities with Google not only indexing my recipes but also interpreting the actual contents of them. They don’t just interpret recipes but also contact information, reviews and so on and this opened up another level for me in the quest for truly semantic and meaningful data on the web.

So, while Microformats was first and are being backed by Google a much broader initiative was launched duing the summer of 2011 where not only Google but also Bing and Yahoo together developed a new format for microdata. It’s called Schema.org and serves as a universal HTML5 based solution to the same set of problems that’s being adressed with Microformats. So, which is best and should be used?

Microformats are defined by a hierarchy made from the class attribute of HTML-elements, it’s a beatiful solution using already existing markup which makes it elegant from a web developers perspective. The upside is that the HTML-code isn’t polluted and is kept clean, the downside is that it mixes content and data with styling. A simple recipe in the hRecipe microformat looks like this

<article>
    <h1 class="fn">Beef with Carrots and Onions</h1>
    <p class="summary">Carrots and onions goes really well together with grilled beef.</p>
    <ul>
        <li class="ingredient"><span class="value">250 g</span> <span class="type">beef</span></li>
        <li class="ingredient"><span class="value">One</span> <span span class="type">carrot</span></li>
        <li class="ingredient"><span class="value">One</span> <span span class="type">onion</span></li>
    </ul>
    <p class="instructions">Trim the onion and carrot, chop them finely and fry in a pan. Grill the beef for 2 minuted per side in a really hot cast iron skillet.</p>
</article>

Using HTML5 microdata and a schema.org Recipe instead we add itemscop to create an item and itemprop to define the property

<article itemscope itemtype="http://schema.org/Recipe">
     <h1 itemprop="name">Beef with Carrots and Onions</h1>
     <p itemprop="description">Carrots and onions goes really well together with grilled beef.</p>
     <ul>
          <li itemprop="ingredients">250 g beef</li>
          <li itemprop="ingredients">One carrot</li>
          <li itemprop="ingredients">One onion</li>
     </ul>
     <p itemprop="recipeInstructions">Trim the onion and carrot, chop them finely and fry in a pan. Grill the beef for 2 minuted per side in a really hot cast iron skillet.</p>
</article>

The code is actually much less verbose and easier to read even if the objective is to mix machine-readable labels to normal semantic HTML.

Microdata separates styling from content and is therefore the winner in my opinion. It doesn’t pollute the code as much as I first thought and since it has all the big search engines as backers it’s somewhat future proof as well, although there’s really no such thing with emerging web standards.

Do you want to read more posts like this? I now blog about Web Development at cleanwebdevelopment.com.


Leave a comment

Your email will not be published.

*