All posts tagged ‘microformats’

File Under: HTML Celebrates 7 Years With Microformats 2.0 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 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 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).

File Under: HTML5, Programming

Google Doubles Down on ‘Microdata’ With New Recipe Search

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

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.

Continue Reading “Microdata: HTML5′s Best-Kept Secret” »

File Under: HTML5, Web Standards

Using Microformats in HTML5

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:

File Under: Uncategorized

Windows Toolkit Gives Oomph to Microformats

MIX microformatNo need to wait for Internet Explorer 8 to benefit from Microformats support. The Microsoft evangelists at MIX Online have released Oomph, a toolkit for creating, styling and consuming microformats.

There are three pieces to the toolkit:

  1. An Internet Explorer add-in, which recognizes microformats and places the green microformats logo in the upper left of the screen.
  2. A cross-browser JavaScript file that does the same thing as the IE add-in, but only for the page it’s on. The MIX team put together this example.
  3. A Windows Live Writer plug-in, which helps people add microformats to blog posts without having to write the code. It even contains an event search, for slurping up event info already input by someone else.

To someone at the front of the Microformat wave, this may not seem innovative. Then, Windows development rarely it at the forefront of new technologies. There is still a lot of room for Microformats to grow and serious adoption by the “IE-erati” is a good sign for the future.

What would be really be cool is if the MIX team incorporated its JavaScript into a Greasemonkey script, which would bring the same auto-discovery of the IE add-in to Firefox (and other browsers supporting Greasemonkey-like tools).

Of course, there are already Firefox plugins and Greasemonkey scripts that allow similar views of Microformats. The IE-specific stuff is the biggest boon, because it’s bringing Microformats to people who didn’t have much access to it previously.

[via Jon Udell]

See also: