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: