Extending HTML5 — Microformats

by .

While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use.

Native ways to extend HTML

There were five fundamental ways we could extend HTML 4:

  • <meta> element
  • class attribute
  • rel attribute
  • rev attribute
  • profile attribute

In HTML5, rev has fallen by the wayside, becoming obsolete since hardly anyone used it correctly, and because it can be replaced by rel. profile is also obsolete, and there is no support for namespaces in HTML5. However, <meta>, class, and rel are all in HTML5. In fact, <meta> now has spec-defined names and a way to submit new name values, and rel has several new link types defined in the HTML5 specification and a way to submit more too.

Even better, WAI-ARIA’s role and aria-* attributes are allowed in HTML5, and HTML5 validators can check HTML5+ARIA. Other new methods of extending HTML5 include custom data attributes (data-*), microdata, and RDFa.

Finally there are microformats. As Dr. Bruce touched on microformats in his article on the <time> element, let’s delve a little deeper into what microformats are and how to use them in HTML5.

Introducing microformats

Microformats are a collection of vocabularies for extending HTML with additional machine-readable semantics. They are designed for humans first and machines second. This is currently accomplished via agreed-upon class, rel, rev and profile attributes, coding patterns, and nesting.

Being machine readable means a robot or script that understands the microformat vocabulary being used can understand and process the marked-up data. Each microformat defines a specific type of data and is usually based on existing data formats — like vcard (address book data; RFC2426) and icalendar (calendar data; RFC 2445) — or common coding patterns (‘paving the cowpaths’ of the web).

Despite their humble beginnings, microformats have also been a runaway success, and they're far more widely deployed than other “big S” Semantic web technologies. For example, many services, such as Twitter and Flickr, offer profile information in hCard format by default, so you may already have a microformatted profile even if you’ve never used microformats before.

Microformat specifications

There are currently 34 microformats specifications (listed below) in varying levels of completion, and you can find out more about them on the microformats wiki.

Published microformats

  • Elemental (simple) microformats
    • XFN — specify relationships with people
    • XMDP — add metadata profiles
    • VoteLinks — indicate agreement or disagreement with, or indifference to, the link’s destination
    • rel-nofollow — don’t give ‘weight’ to a link (don’t give ‘Google juice’; mainly for search engines)
    • rel-license — specify license information
    • rel-tag — add tags
  • Compound microformats
    • hCard — contact information for people and organisations
    • hCalendar — time-based information, such as events
    • XOXO — outlines

Draft microformats

  • adr
  • geo
  • hAtom
  • hAudio
  • hListing
  • hMedia
  • hNews
  • hProduct
  • hRecipe
  • hResume
  • hReview
  • rel-directory
  • rel-enclosure
  • rel-home
  • rel-payment
  • robots exclusion
  • Species
  • xFolk

Despite being drafts, many of these are in widespread use.

Microformat patterns

These common coding patterns are just best practices that are frequently used in writing plain old semantic HTML (POSH) to create microformats.

  • <abbr> design pattern
  • class design pattern
  • date design pattern
  • datetime design pattern
  • include pattern
  • value class pattern
  • rel design pattern

These specifications and patterns cover many common types of data. They’ve been created by a grass-roots organisation of interested people, and anyone is welcome to contribute or even propose a new microformat.

A lightning introduction to using microformats

For those of you that haven't used microformats before, I’ll briefly introduce some simple microformats — hopefully so simple you’ll be encouraged to use them right away!

Using rel-license for licensing information

Adding license information is quite a common activity, and while we can add a link to Creative Commons or another license easily enough, someone would have to read it to understand the content’s license:

<small>This article is licensed under a 
  <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">
  Creative Commons Attribution Non-commercial Share-alike 
  (By-<abbr>NC</abbr>-<abbr>SA</abbr>) license</a>.
</small>

If this information was machine-readable, search engines could use it to help consumers searching by license. By using the rel-license microformat to add rel="license" to the license link (indicating it’s the license for the page’s main content), we can do just that:

<small>This article is licensed under a 
  <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">
  Creative Commons Attribution Non-commercial Share-alike 
  (By-<abbr>NC</abbr>-<abbr>SA</abbr>) license</a>.
</small>

This article is licensed under a Creative Commons Attribution Non-commercial Share-alike (By-NC-SA) license.

A rel-license-formatted code sample with an example rendering

This may be so easy you don’t even realise you’ve just microformatted the link! In fact, Google already uses this data to allow us to search by license (look in advanced search, in the extra options).

Google advanced search options, showing the “Usage rights” pulldown

Using XHTML Friends Network (XFN)

Maybe we should term this one eXtensible Friends Network instead :-) XFN is a way of specifying your relationship with people — everything from “met” to “sweetheart” — using the rel attribute on a link to their homepage.

There are two main values: rel="contact" for someone you know how to get in touch with, and rel="me". The rel="me" value allows you to claim ownership of your various websites, including your accounts on social networks. For example, I could have a profile with a link to my Twitter account:

<p>Oli Studholme — <a href="http://twitter.com/boblet">follow me on
  Twitter (@boblet)</a></p>

A person can infer that @boblet is my Twitter username, but by adding rel="me" we can state this relationship in a machine-readable way.

<p>Oli Studholme — <a rel="me" href="http://twitter.com/boblet">follow me on
  Twitter (@boblet)</a></p>

In order to actually work, this would need to be on my personal homepage, with the same homepage added to my Twitter profile. By doing this, a social web app that understands XFN could confirm @boblet is me, check my friends on Twitter, check if those people are already registered, and then allow me to follow them all with one click — much easier.

For more on this idea, check out Identity consolidation and the XFN rel="me" value, the RelMeAuth proposal on the microformats wiki, and Google’s Social Graph API. It seems Facebook is supporting rel="me" too.

Rel-license and XFN are simple rel-based microformats, but even with their simplicity you can see the potential power in this machine-readable stuff. Now let’s look at microformats for contact and event information.

Using hCard for contact information

Almost every website has an about page with some contact information:

<p>Oli Studholme — <a href="http://oli.jp/">http://oli.jp</a>, or 
<a href="http://twitter.com/boblet">follow me on Twitter (@boblet)</a>.</p>

Unfortunately, adding someone’s contact information to your phone or address book generally involves a lot of copying and pasting. If the data was machine-readable, however, we could use a tool to do that. Let’s add the hCard microformat to this code snippet.

<p class="vcard"><span class="fn">Oli Studholme</span> — 
<a class="url" href="http://oli.jp/">http://oli.jp</a>, or 
<a class="url" href="http://twitter.com/boblet">follow me on Twitter 
(@<span class="nickname">boblet</span>)</a>.</p>

Oli Studholmehttp://oli.jp, or follow me on Twitter (@boblet).

An hCard-formatted code sample with an example rendering

So we’ve added a bunch of classes. There’s nothing special about that, of course, until you realise they're all part of the hCard microformat. The first one is vcard on the containing <p> element, indicating that there's hCard data here. Then we have fn, which stands for full name, url for an associated homepage, and nickname for, well, a nickname.

This is a simple example, and in fact a valid hCard (generally) only requires vcard and fn. But hCard has much more depth. We can mark up all kinds of contact-related data: addresses, company information, even a profile photo. For example, we can explicitly specify a given name and family name (this is required for Chinese, Korean, Japanese and Vietnamese names), even middle names and titles.

<span class="vcard"><span class="fn n" lang="ja"><span class="family-name">
スタッドホルム</span>・<span class="given-name">オリ</span></span></span>

The additional n value is actually required, but can be inferred (the so-called “implied n optimisation”) and therefore omitted for names that follow these patterns:

  • given-name family-name
  • family-name, given-name

So what’s the benefit of this? Well, there are several tools that will convert this hCard-microformatted data into a vcard file we can download and automatically add to our address book. Nifty!

The Firefox Operator plugin’s hCard export options
The Firefox plugin Operator can save hCard-formatted content as a vcard, or add it to Yahoo Contacts

It’s also recognised by Google’s Rich Snippets and Yahoo’s SearchMonkey, useful for the contact information on any company website.

A preview of how rich snippet data may be incorporated into Google’s search results—in this example “Osaka” and “designer” Microformat hCard data extracted by the Google Rich Snippet testing tool
Google’s Rich Snippet testing tool for an hCard (Note the “Osaka - designer” in the search preview)

Organisations, addresses, and phone numbers

Smaller company websites often have the company name and contact details in the footer, so let’s briefly see how to do that.

<p class="vcard">
<a class="fn org url" href="http://www.w3.org/Consortium/contact-keio" title="Contact Information for W3C/Keio"><span class="organization-name">W3C</span>/<span class="organization-unit">Keio</span></a><br>
<span class="adr"><a class="extended-address" href="http://www.keio.ac.jp/english/about_keio/campus_info/sfc1.html">Keio University Shonan Fujisawa Campus</a><br>
<span class="street-address">5322 Endo</span>, <span class="locality">Fujisawa city</span>,<br>
<span class="region">Kanagawa prefecture</span> <span class="postal-code">252-8520</span> <b class="country">Japan</b><br>
<span class="tel">Telephone: <span class="value">+81-466-49-1170</span></span><br>
<span class="tel"><span class="type">Fax</span>: <span class="value">+81-466-49-1171</span></span></span>
</p>

W3C/Keio
Keio University Shonan Fujisawa Campus
5322 Endo, Fujisawa city,
Kanagawa prefecture 252-8520 Japan
Telephone: +81-466-49-1170
Fax: +81-466-49-1171

A microformatted example company hCard, complete with address, and a sample rendering

By using fn together with org we can create an hCard for an organisation. Each part of the address is specified (<span>licious!), and we’ve also included a phone number (tel’s default type is voice) and fax number (specifying type and using the value class pattern).

A preview of how rich snippet data may be incorporated into Google’s search results—in this example “Kanagawa Prefecture” and “W3C” Microformat hCard data extracted by the Google Rich Snippet testing tool
Google’s Rich Snippet testing tool for an organisation hCard (note the address and organisation info in the search preview)

And with Operator, we can add this hCard to our computer’s address book in one click. If you’ve ever manually added an address to your address book, you’ll love this ;-)

Exporting an hCard to your computer’s address book via Operator An hCard exported by Operator is automatically added to the address book
Adding hCard-formatted contact information to your address book with one click

Using hCalendar for event information

Let’s briefly look at marking up a simple event. Here’s one I’m involved with:

<h3><a href="http://atnd.org/events/5181">WDE-ex Vol.11 —
  Designing for iPad: Our experience so far</a></h3>
<p>July 21st 19:00-20:00 at 
<a href="http://www.apple.com/jp/retail/ginza/map/">Apple Ginza</a>.</p>

Just by reading, we understand the event name, date, time, and location. But this information is difficult for computers to extract. By using the hCard microformat, it will be machine-readable.

<div class="vevent">
  <h3><a class="url summary" href="http://atnd.org/events/5181">
  WDE-ex Vol.11 — Designing for iPad: Our experience so far</a></h3>
  <p><span class="dtstart"><abbr class="value" title="2010-07-21">
  July 21st</abbr> <span class="value">19:00</span></span>-
  <span class="dtend"><span class="value">20:00</span></span> at 
  <a class="location url" href="http://www.apple.com/jp/retail/ginza/map/">
  Apple Ginza</a></p>
</div>

WDE-ex Vol.11 — Designing for iPad: Our experience so far

July 21st 19:00-20:00 at Apple Ginza

Example hCard-formatted event, including a sample rendering

We’ve added vevent on a wrapping element to indicate this is an hCalendar. Events are required to have a summary and a starting time, so we’ve added summary and indicated the starting date and time using dtstart. While historically datetimes were indicated using <abbr title="">, the required ISO 8601 format (for example “2010-07-10T19:01:29”) is very unfriendly to screen readers. Imagine having those numbers read to you! For this reason, the hCalendar specification recommends either breaking the datetime into separate date and time pieces, using the value class pattern, or possibly doing both. The specification is also smart enough to know that if the end datetime dtend is only a time, then it’s on the same day, so we don’t need to specify the date again, although tool support for this is spotty. Finally, we’ve added some URLs, one of which is for the event’s location.

The Firefox Operator plugin’s debug window, showing information about the current hCalendar
The Firefox plugin Operator’s debug view, showing the microformat properties it has recognised

With this data now being machine-readable, we can do things with it. For example, we can add the event to a calendar app with one click.

The Firefox Operator plugin’s options for hCalendar-formatted content
Operator can save hCalendar-formatted content as an ical file (for easy importing into your address book software), or add it to various online calendars

Using microformats in HTML5

So now we’ve had a whistle-stop introduction to microformats and gotten a glimpse of the benefits they provide. The question is: Can we use them in HTML5 pages? Let’s start with the good news.

As most microformats use only class and/or rel — basic parts of HTML that remain unchanged in HTML5 — these microformats are completely fine in HTML5. Yay! However there are a few wrinkles to keep us on our toes.

The profile attribute

The profile attribute is obsolete in HTML5, as it was determined unnecessary. Currently, microformat profiles are very rarely used in the wild and are not required, so this probably won’t affect you.

Microformats specifications vs HTML5

While microformats using class and rel work fine, some of the new features in HTML5 aren’t supported yet. The Microformats in HTML5 page on the microformats wiki currently begins:

This page is to document future use of microformats in HTML 5. None of the items documented are supported now, and may change upon proper development within the microformats community, or changes in the HTML 5 specification.

This includes the nifty new <time datetime=""> element, which would be perfect for microformat times, such as dtstart and dtend in the hCalendar microformat. It’s also true for adding microformats via microdata rather than class and rel. There has been talk of a general way to map any microformat into microdata, but this hasn’t eventuated as of yet.

Microformats-consuming tools (or, the problem with HTML Tidy)

The microformats wiki’s warning about <time> brings us to another caveat: tool support. Even if <time datetime=""> was valid in the microformats spec, at present most of the microformats tools can’t get this information from the datetime="" attribute. Now, you could wrap <time datetime=""> around a microformats dtstart or dtend:

<time datetime="2010-07-21T19:00:00+09:00"><span class="dtstart">
  <abbr class="value" title="2010-07-21">July 21st</abbr>
  <span class="value">19:00
</span></span></time>

However, as the <time datetime=""> data is then not explicitly part of the microformat, doing this isn’t really getting you anywhere, except bloated code-ville.

The problem is actually way worse as many tools use the parser HTML Tidy (“last updated March 2009”!), which probably won’t be fixed for new HTML5 elements. This means any microformats classes on new HTML5 elements will be ignored. The potential alternative html5lib.php is still pretty young. You can get around this by wrapping HTML5 elements in <div>s and <spans> and applying the microformats classes to them, but that’s hardly ideal.

However, there’s a ray of sunshine here. The tool you’ll most want to use is H2VX.com — it converts hCard and hCalendar microformats into vcard and ical files for users to download and add to their address books and calendars, respectively. While h2vx.com uses Tidy, Tantek Çelik and Brian Suda (the maintainers of H2VX) have a version of H2VX that does work with HTML5 elements and <time>’s datetime attribute. We’re saved! Check it out at dev.h2vx.com.

Microformats Tool support

OperatorOptimush2vx.comdev.h2vx.com
can use classes on HTML5 elementsyesyesnoyes
supports HTML5’s <time>nononoyes
Understands the value class patternyesnoyesyes
Understands implied dtendyesnoyesyes
Understands timezonesyesyesyesyes

I didn’t expect anyone to support <time> until it became part of a microformat specification. Given how … non-micro expressing datetimes is in microformats currently, I am very thankful H2VX has in dev.h2vx.com!

Conclusion

So where does that leave us? Well, if you keep the above caveats in mind you can safely use microformats in HTML5. Google has no problem with microformats in HTML5, even on new elements, and I’m under the impression that Yahoo is the same. However, remember that if you want to offer a “click to download” link via H2VX, you’ll have to use dev.h2vx.com.

An important thing to note about microformats: as wonderful as they are, the current method of using the plain old semantic HTML tools of class, rel, and coding patterns is something of a brilliant hack. The use of class (an author playground) and the lack of use/demise of profile, combined with the complexity of coding to detect for microformats in the wild, means that native browser support is unlikely anytime soon. There was the expectation that at some stage there’d be a better way to easily add extra semantic information for others to use. In future articles, we’ll look at microdata and RDFa, and see what they have to offer over plain old semantic HTML.

If you have common types of data in your content that are covered by a microformat, and you want to make them machine-readable for others (and who wouldn’t), you should definitely consider using microformats in HTML5. Adding microformats is basically adding a lightweight API to your content, and is simple enough that even a designer can do it! This helps search engines and savvy users to more easily use your content. Check out the microformats wiki, grab the indispensable microformats cheat sheet by Brian Suda, peruse these books and DVDs on microformats, and start getting (even more) semantic!

Books and DVDs

Changes

  1. Minor copyedits and the major addition of dev.h2vx.com support, with thanks and apologies for the delay to Brian Suda and Tantek Çelik.

30 Responses on the article “Extending HTML5 — Microformats”

Andy Mabbett says

Your list omits the ‘Species’ microformat, for the names of living things.

BTW, one of the biggest publishers of microformats is Wikipedia; yet there are unbelievably, proposals to remove them from there, because “microformats are an as-yet-unproven technology”; “there are currently no user applications that make meaningful use of our microformats”; “Wikipedia content is meant to be read by humans, not machines.”; and “an html class attribute should not be abused for conveying semantic meaning”!

See http://en.wikipedia.org/wiki/Wikipedia:Requests_for_comment/Microformats – any Wikipedia editor may comment.

Andy Mabbett says

P.S. There are also some issues around the TIME element only taking whole-day dates (“23 June 2010″) and not YYYY-MM or YYYY dates; see http://wiki.whatwg.org/wiki/Time_element

Again, anyone with an interest can comment.

Ric says

I’ve been using microformats for a little while and like the idea. I’d prefer an HTML5 optimised version that used data-* instead of classes though.

bruce says

Rick, data-* is only for use on private scripts to the page, not for external aggregators: “Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes.”

See http://html5doctor.com/html5-custom-data-attributes/

Tantek says

Oli,

This is a GREAT summary article. Thank you for your thoughtful and informative writing.

I too want to use the <time> element with microformats. I’ve even tried in some small experiments, and kept running into limitations of the <time> element itself, which inspired me to write-up numerous proposals for improving it.

http://wiki.whatwg.org/wiki/Time_element

Two sets of proposals in particular would greatly help time+microformats if they were accepted and incorporated into HTML5:

http://wiki.whatwg.org/wiki/Time_element#Date_granularity

http://wiki.whatwg.org/wiki/Time_element#Syntax_improvements_for_reducing_DRY_violations

I strongly encourage you and anyone else who wants to use <time> + microformats to take a look and add your opinion, experiences, use-cases etc to those.

If you have time, please also take a look at the other proposals on the page, (e.g. for further broadening the scope of the time element) and add your opinion there as well.

Thanks,

Tantek

(reposted with removing http before links in attempt to make it past a perhaps overly aggressive spam filter – feel free to correct links)

Bruce Lawson says

Tantek, I’ve enabled your links.

And thanks for writing up those proposals (you know I fully support them, I’m sure).

Andrés Sanhueza says

When HTML5 is completely working, will it mean that we can safely stop using the class attribute for semantic data and use new attributes instead?

Oli Studholme says

@all thanks for your feedback

@Andy — added Species to draft microformats, thanks for the info!

@Tantek — Thanks for your kind words and the information about <time>. I hope that <time> gets expanded to at least year and year-month, and will add some l10n-related feedback. However I actually would like a working conversion service like h2vx.com that works for HTML5’s new elements even more. Do you have any updates on progress towards this? It’d also be great if h2vx supported timezones and implied dtend.

I’m also really looking forward to the abstraction allowing any microformat to be used via microdata syntax you mentioned a while back :)

@Andrés — You can safely stop using class for semantics when all the semantics you wish to represent are completely defined by other methods. Something tells me you’ll be using it for a while yet ;) This is not a bad thing though — as mentioned in the intro that’s one of the use cases of class.

Tantek says

@Bruce thanks for the hyperlink enabling – I’m going to ask for that again (seems like WordPress has effectively killed high quality reference-citing comment dialog with its overly aggressive comment-spam filtering).

And yes, I very much appreciate that you support the proposed upgrades to the <time> element as well.

@Oli thanks for the follow-up.

I hope that gets expanded to at least year and year-month

It would be great if you could add a note of your support (with any additional use-cases you think of etc.) accordingly to these specific proposals:

http://wiki.whatwg.org/wiki/Time_element#year_only

http://wiki.whatwg.org/wiki/Time_element#year_month_only

I actually would like a working conversion service like h2vx.com that works for HTML5’s new elements even more. Do you have any updates on progress towards this?

Ok, let’s get down to specifics on this one. Please add a point (or a few) of what specific HTML5 support you’d like to see to this wiki page section:

http://microformats.org/wiki/h2vx#HTML5_support

(e.g. do you want/need support for all of HTML5′s new semantic elements, or are there certain key ones that you would be ok with seeing first before the others, like <time> etc.)

Adding general HTML5 support is a very big task and may take some time. If you can help indicate which specific features, pieces of support you think are important, perhaps we can use that to prioritize and get at least some incremental support sooner.

It’d also be great if h2vx supported timezones and implied dtend.

My understanding is that it does support implied dtend per the test cases on this page that mention “imply date from dtstart”:

http://microformats.org/wiki/value-class-date-time-tests (see the results table, X2V 0.9.7 column)

e.g. H2VX passes this test:

http://microformats.org/wiki/value-dt-test-YYYY-MM-DD–Hpm-EEpm

If you have examples that H2VX fails on, please add URLs to them to the aforementioned H2VX wiki page:

http://microformats.org/wiki/h2vx#issues

in the same manner as requested here:

http://microformats.org/wiki/h2vx#not_possible_to_use_dtstart_with_timezone_in_abbr_title

Thanks much!

Andy Mabbett says

@Oli Thanks, but appaently, you haven’t.

Oli Studholme says

@Tantek — links linked. Re: implied dtend I prolly made a mistake then — will check. Thanks for the info about submitting bugs, that’d be a useful link to add to the site itself.

@Andy — aah yes, apparently it helps if you push the Update button. Thanks for that.

Wim says

Using class for the microformat markup is clearly a problem, in part because it’s so easy to overlap with other markup. Authors use classes like “url” or “region” all the time, and might not be aware of the hCard format. All sorts of markup might look like a microformat. I’m pretty sure Google and Yahoo had to do a lot of engineering to get the rich snippets working correctly because of problems like this (for them, the parsing overhead is probably not insignificant either).

If it’s the only way to get Google and Yahoo to add this information to rich snippets then so be it, but it is pretty fragile.

Oli says

@Wim — no, it’s not a problem. These class names only mean something when they’re inside an element with the microformat’s container class, for example vevent or vcard. It’s a basic form of namespacing, and I don’t think you’ll find many web designers accidentally using those names ;-) Of course we can namespace our CSS too using these as part of our selectors; .vcard .url {}

In addition most microformat class names (apart from the container class names) are fairly meaningful, so for example if you wanted to style a URL in an hCard, chances are you were going to use a semantic class name like class="url" anyhow. In that case any ‘accidental’ misuse will most likely at least be semantically correct.

Dan M says

I’m sort of 50-50 on the idea of using class names for microformats.

I kind of agree with @Wim that on a large project there will likely be some rendering bugs introduced by people accidentally using the same class names used by microformats, but anyone competent enough to take advantage of microformats would hopefully think to account for such issues (though that’s still unnecessary hassle).

What I do like about the concept is that I’ll probably want to style that information in my own specific way anyways, so I would need class names there either way. Having the microformat assign these to me is better than me picking my own arbitrary class names because it will force me to be consistent and to re-use the same styles in multiple places.

Overall I can definitely live with using class names, but the neat-freak in me would rather see my CSS selectors (styles) and my semantics selectors (microformats) using separate attributes.

Oli says

@Dan — great point about how microformats class names can help provide semantic names in situations where you’d need to apply style via a class name anyhow. And regarding moving additional semantic meaning out of class and into something else, stay tuned for upcoming articles on microdata and RDFa…

skippy says

MVC anyone? anyone?

Oli says

@skippy — please try harder

Tantek says

@Oli – I just did a bit of hacking with @briansuda on updating X2V and H2VX with *preliminary* HTML5 support, including what you were asking for:

* microformat class names on new HTML5 elements
* parsing the time element, specifically, its ‘datetime’ attribute, for date and time related microformats properties such as hCalendar’s dtstart/dtend and hCard’s bday (other date/datetime properties should work too).

Please try the public beta update to H2VX here:

http://dev.h2vx.com/

with your choice of HTML5 + microformats examples and let us know how it works:

http://microformats.org/wiki/h2vx#HTML5_support

Thanks!

Tantek

Josh L says

Is there a cheat sheet available for draft specifications? I do the front end for an inventory/shopping app and hListing/hProduct are all that I’m using right now.

Fantastic writeup!

Oli Studholme says

@Tantek — thank you, and @briansuda too! I’ll check it out and update the article soon.

@Josh — not that I know of. It would be really handy if someone made such a cheatsheet, or for-authors introductions to each microformat…

Laura says

The content is elaborate and explained many features of HTML5.0. I would like to know how to create a filling form/contact form using HTML 5.0? Can anyone explain me?

Jan Skovgaard says

Nice article Oli :)

Even though I have known about Microformats for a long time I must admit that I have not really been using any of them…but that is about to change!

I’m a bit curious about if there is any good scripts out there that makes it easy to provide download links to vcard/hcards etc. on the fly so that the user does not have to rely on a 3rd party browser plugin for instance?

Oli Studholme says

@Laura — Mark Pilgrim explains HTML5 improvements to forms, but you’ll also need a server-side program or service to receive the submitted form.

@Jan — Thanks for the prompt. The service you’re after is dev.h2vx.com. It now supports HTML5 and even <time datetime="">! I’ve added the info to the microformats article above.

Dao says

As Skippy did not elaborate on his post, the disconnect i see here is between the concepts of document, content, data, view, and model. Many folk continue to see the HTML document as both the physical representation and source of data or content. More accurate perhaps is that an HTML document or snippet is a view of that data, and then only within specific contextual relationship(s) to the data. This may or may not be what Berners-Lee envisioned, but it is what we have today.

Microformats and other HTML schema efforts (schema.org – schema.rdfs.org) laudably define structure (a data model if you will) to aid us when translating views of data back into machine readable and storable data. While i often take issue with the specific hierarchal taxonomies that evolve (in many ways a taxonomy is also simply a view of something more concrete), they can be highly practical for cases such as vCard or iCal where the data is easily structured for a specific range of uses.

It seems to me the challenges we encounter with the evolution of various microformats and schemas to HTML5 highlights the broader challenge that nearly all taxonomies carry or presume context and thus must be versioned, and the specific version referenced, when the data is subsequently stored and used.

Short version for @Skippy: Microformats and schema help make the model easy when using MVC, MVP, and so on.

~ Dao

roberto says

Why this page don’t validate ? (W3C)

Oli Studholme says

@roberto — because it contains invalid HTML…? (is this a trick question?)

Steven Gardner says

I am creating a large events based site and have started to impliment microformats.

Once its all formated correctly I want to have a little button or link at the footer of each event that will download the event. Does anyone have any information of how best to do this.

Cheers
Steven

Daniel Demmel says

There’s an official fork of Tidy which loves HMTL5 and is very actively maintained – I’ve submitted some issues and got replies in a few hours and fixes in a day!

https://github.com/w3c/tidy-html5

Ramūnas Bruzgys says

Hi,
Maybe you can help me.
My homepage is HTML5 ready with 5 sections.
And information in section is copy of website sub-pages. And I want them made rel=canonical. Maybe you know, how can I make it?

Thank you,
Ramūnas

Blog Informasi dan Berita Unik Terbaru says

very difficult, using HTML5 perfectly. I’m learning to learn microformat, even though I know it’s very confusing.

Hopefully with the tutorial, it can be easy to learn HTML5 and microformat.

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.