Microformats.org recently celebrated its seventh anniversary.

In case you’ve been too busy snowboarding the Alps to keep up, Microformats are simple, but incredibly useful, little HTML extensions that give your website superpowers.

You might, for example, use Microformats to expand your basic HTML markup to denote events, blog posts, reviews or address book entries. The extra markup makes your site more meaningful to both humans and search-engine spiders.

Seven years ago when it was first dreamed up there was nothing quite like Microformats. Now there are several other ways to add semantic meaning to your code — like HTML5 microdata or RDFa (if you’re a masochist) — but Microformats.org has managed to outlast numerous other attempts at the same idea, even attempts from big companies like Google.

Much of Microformats’ success lies with its very simple founding principle — humans first, machines second. And success it has had. According to the Web Data Commons, as of 2012, 70 percent of websites using structured data are using Microformats to structure it.

That doesn’t mean the community-driven effort is resting on its heels though. In fact Microformats sees its challengers as opportunities to expand — think of Microformats as the Borg of HTML metadata. As founder Tantek Çelik writes on the Microformats blog, “we should document the alternatives as they emerge, do our best to answer the questions posed, and reach out to other communities to find areas of overlap to collaborate. With greater collaboration comes greater interoperability.”

To help get the ball rolling again, Microformats 2 is now ready for testing. The updated version has been in development for several years now and builds on lessons learned from both Microformats and alternatives like microdata and RDFa. Çelik says that Microformats 2.0 is ready for trying out in real world experiments, and points out several real-world examples, including, natch, the Microformats blog.

If you’ve never used Microformats to markup a street address, address book cards or calendar events, head on over to Microformats.org and read through the docs. Also be sure to check out our tutorial on using Microformats in HTML5 (some of the syntax has changed slightly with Microformats 2, but everything is backwards compatible).

Google has rolled out a new recipe search tool to help you find delicious recipes on the web. Our friends at Epicenter have more details on Google’s announcement, but the real news for web developers is that Google’s recipe search is built almost entirely off microdata.

As we’ve pointed out before, microdata — little snippets of code that offer search engines additional information about your content — is one of the best-kept secrets in HTML5. Google’s recipe search tool not only highlights just how useful microdata is, it also may give developers the extra incentive they need to start using more microdata on the web.

While Google makes no guarantee that using microdata will raise your website’s standing in search results, the company is clearly using microdata when it finds it.

Google’s microdata support is format-agnostic, which means it can read Microdata, Microformats and RDFa. Google collectively refers to the three as “rich snippets.”

All three formats work in similar ways, extending HTML by adding custom vocabularies to your pages. The main difference between the three is the specific syntax used.

Which one should you use? In most cases one is not better than the other, just different. Because much of the inspiration behind HTML5 Microdata came from the efforts of the Microformats community, the two are very similar. The third option, RDFa, is somewhat more complex and in many situations it may be more difficult to implement.

If you’d like to add HTML5 Microdata to your site, check out our article on Microdata. Technically the Microdata spec has been removed from the W3C’s draft version of HTML5 and is now a standalone spec. Like HTML5, the W3C considers the Microdata spec to be a draft, which means it could change in the future. If that makes you nervous, Microformats, which have been around quite a bit longer and are more widely used, may be more to your liking. For more on adding Microformats to your site check out our write up on how to mix HTML5 and Microformats.

See Also:

• Microdata: HTML5’s Best-Kept Secret
• Using Microformats in HTML5
• Microformats are Awesome, Now Put Them to Work for Your Site

Given the amount of industry noise about native video and scripted animations, you’d be forgiven if you had never heard of the new microdata specification included in HTML5.

Similar to outside efforts like Microformats, HTML5′s microdata offers a way of extend HTML by adding custom vocabularies to your pages.

The easiest way to understand it is to consider a common use case. Let’s say you want list details about a business on your page — the name, address, telephone number and so on. To do that you’ll need to use some vocabulary in addition to HTML, since there is no <business> tag.

Using microdata, you can create your own custom name/value pairs to define a vocabulary that describes a business listing.

When a search engine spider comes along, it will know that not only is your data a business listing, but it can discover the address, the phone number, or even the precise geo-coordinates if you want to include them.

Given that HTML5 is still a draft at this point, why bother?

Actually, despite its lack of publicity and HTML5′s still-incomplete status, microdata is already being used by Google, which has started adding information gleaned from microdata markup to its search result snippets.

Microdata is useful today, but what about Microformats or more complex tools like RDFa? The answer is that all three will work (and Google, in most cases, understands all of them).

In the end, the differences between the three are primarily in the syntax, and each has its advantages and disadvantages. But given that the Microdata specification will very likely become an official recommended web standard as part of HTML5, it seems the most future-proof of the three options.

So how do we add Microdata to a web page? Consider the following basic HTML markup, which might be used to describe my local coffee shop:

<div>
    <h1>Hendershot's Coffee Bar</h1>
    <p>1560 Oglethorpe Ave, Athens, GA</p>
</div>

This markup gets the basic information on the page and humans can read it, but search engine spiders aren’t going to get much out of it. While it’s true that even Google says you should design for humans first and robots second, we can improve this code without making it any less human readable.

Microdata

To rewrite this business listing using HTML5′s microdata syntax, we would do something like this:

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <h1 itemprop="name">Hendershot's Coffee Bar</h1>
    <p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">1560 Oglethorpe Ave</span>, 
      <span itemprop="locality">Athens</span>, 
      <span itemprop="region">GA</span>.
    </p>
</div>

The Microdata markup adds a couple attributes you may not have seen before, itemscope, itemtype and itemprop. The first is essentially just a top level marker, it tells the search engine spider that you’re about to define something in the following nested tags. The itemtype attribute tells the spider what you’re defining — in this case, an organization.

The rest of the markup should look pretty familiar if you’ve used Microformats. The main change is the itemprop attribute (short for item property) to define what each element is. Because our address is all one paragraph, we’ve added some span tags to define each element of the address separately — street address, locality and so on. If we wanted, we could add other properties like a phone number (itemprop="tel"), a URL (itemprop="url") or even geodata (itemprop="geo").

So where did we get these itemprop vocabularies from? Well, as the URL in the itemtype attribute indicates, they come from data-vocabulary.org. Of course you can make up your own itemprop syntax, but if you want search engine spiders to understand your microdata, you’re going to have to document what you’re doing. Since the definitions at data-vocabulary.org cover a number of common use cases — events, organizations, people, products, recipes, reviews — it makes a good starting point.

Microformats and RDFa

So how does Microdata fit with Microformats and RDFa? Well, the WHAT-WG, which helps to develop the HTML5 spec, decided the flame wars provoked by the debate over whether to use Microformats or RDFa lacked sufficient vehemence, so they added a third definition of their own.

Actually, the reasoning seems to have been something like this: Microformats are a really good idea, but essentially a hack. Because Microformats rely only on the class and rel attributes, writing parsers to read them is complicated.

At the same time, RDFa was designed to work with the now-defunct XHTML 2.0 spec. Although RDFa is being ported to work with HTML5, it can be overly complex for many use cases. RDFa is a bit like asking what time it is and having someone tell you how to build a watch. Yes, RDFa can do the same things HTML5 microdata and Microformats do (and more), but if the history of the web teaches us a lesson, it’s that simpler solutions almost always win.

Further Reading

Before you dive into microdata, be sure to check out all the options. Google has a nice overview on adding microdata to your page, and offers examples using all three markup syntaxes. Mark Pilgrim’s Dive Into HTML5 also devotes a chapter to microdata with more detail on how microdata parsers read your markup.

Also, keep in mind that it isn’t just search engines that stand to benefit from microdata on your pages. The HTML5 spec also defines a set of DOM APIs for web browsers to read and manipulate microdata on your pages. At the moment, no browser supports the API, but most probably will eventually.

The more information you can give the web, the more it can do with that information. Eventually, search engines could use microdata to find your friends on the web (like XRD and WebFinger) and browsers could use it to connect you with those friends no matter what flavor-of-the-month social site they might be using.

See Also:

• Using Microformats in HTML5
• Where on the Web Is HTML5?
• Add Semantic Value to Your Pages With HTML 5
• Microformats are Awesome, Now Put Them to Work for Your Site

With all the attention being paid to HTML5′s <video> tag, few have clued in to what is perhaps the most useful magical pixie dust hidden inside the web’s next markup language: the new semantic tags.

Rather than using <div> tags to wrap your page sections, HTML5 offers much more sensible elements like <header>, <nav>, <section>, <article>, <footer>, <aside> and <time>.

Of course, cool as the new tags are, they don’t cover every situation, which is why, as with HTML 4, you can extend HTML5′s tags to add even more semantic meaning to your pages.

One of the more useful ways to extend HTML is with microformats — small chunks of semantic markup for address book info, event listings and machine-readable metadata. In HTML 4, this is done using the class, rel, rev and profile attributes, along with some established design patterns and nested tags.

However, HTML5 tosses out the rev and profile attributes and adds some new things like WAI-ARIA’s role and aria- attributes, as well as the new data- attribute system.

So where does that leave microformats? Well, the answer is a bit complicated, but our friends over at HTML5 Doctor recently dove into the confusion and have published a rough guide to what works in HTML5. There are some great tips, not only about implementation, but also what you should avoid and what might change in the future.

The article walks through a number of common microformats like address cards and licensing information, showing how they work in HTML 4 and what elements might be extended in HTML5 — like using the time element within the hCalendar microformat.

In the end, while the article has some caveats you should read up on, the good news is that you can safely use microformats in HTML5. Also, be sure to read through the comments on the post as Tantek Çelik, one of the authors of microformats, has some important clarifications and suggestions for using microformats in HTML5.

See Also:

• Where on the Web Is HTML5?
• What Happened to the Microformats Support in Firefox 3
• Microformats are Awesome, Now Put Them to Work for Your Site