HTML5 and Microformats, give some meaning to your HTML5 webpage.

HTML5 and Microformats

Microformats… What, Why?

Microformats are used to describe type of content by adding simple markup to information such as reviews,articles, contact details, locations on web page. You must be thinking, why mess up with clean HTML markup syntax and add some extra attributes?

Well the main reason behind using Microformats is to allow other machines or software to understand and reuse the information in other applications such as Search Engines to produce better results.

Let’s see what exactly it is, below is an example of simple movie review written in plain HTML.

<div><span>anonymous, April 18th, 2005</span>
<div>
  <a lang="zh" href="http://www.imdb.com/title/tt0299977/">
  Ying Xiong (<span lang="en">HERO</span>)
  </a>
 </div>
 <div>Rating: 4 out of 5</div>
 <blockquote><p>
  This movie has great visuals and music.
 </p></blockquote>
</div>

Well, there’s nothing in this code. Even it looks good, formatting wise. But if a machine or software attempt to read this code, it will not understand the meaning of code. The same code can be rewritten in microformat hreview with just few more keywords to make it meaningful.

<div class="hreview">
 <span class="reviewer vcard">
  <span class="fn">anonymous</span>,
  <abbr class="dtreviewed" title="2005-04-18">April 18th, 2005</abbr>
 </span>
 <div class="item">
  <a lang="zh" class="url fn" href="http://www.imdb.com/title/tt0299977/">
  Ying Xiong (<span lang="en">HERO</span>)
  </a>
 </div>
 <div>Rating: <span class="rating">4</span> out of 5</div>
 <div class="description"><p>
  This movie has great music and visuals.
 </p></div>
</div>

Why use Microformats?

  1. Well structured information, easy to read for humans as well as machines.
  2. Easier way to public rich information.
  3. You don’t have to depend upon meta tags alone.

Know more about Microformats.org

Are Microformats SEO Friendly?

There is only a single requirement for a webpage to be SEO friendly, being well structured. For the exact thing, Microformats came in to picture. Microformats adds enormous amount of meaning and weightage to the data you are defining. Microformats provide better Search Engine Optimization. Search Engines like Google use Rich Snippets, they have better understanding of Webpages with Microformats.

HTML5 Elements vs <div>

<div> says nothing, really. It’s been a while after since HTML5 has came in to reality. Why not use beautiful elements provided with HTML5? HTML5 offers much more meaningful elements such as <header>, <section>, <nav>, <article>, <aside>, <footer>. We can not use HTML5 elements everywhere since only name doesn’t suggest anything sometimes. However, there is a way to extend HTML5 tags.

Extending HTML5 tags with Microformats

Well, That’s it for now. Since HTML5 has introduced some new elements, Microformats are needed to be extended for the new elements that are introduce in HTML5 specification. The next article in this series will cover how to extend HTML5 to make it SEO friendly 🙂

Articles in this series

  1. HTML5 and Microformats, Boost your search engine rank!