Wednesday, September 1st, 2010

Extending HTML5

Category: Tutorial

Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?

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.

First, he starts with the options HTML4 gave us and what options we now have with HTML5:

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 relprofile 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 newname values, and rel has several new link types defined in the HTML5 specification and a way to submit more too.

Even better, WAIARIA’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. Guest doctor Chris Bewick introduced us to HTML5’s new data-* attribute system, which is perfect for adding private custom data for JavaScript, and we’ll no doubt meet microdata and RDFa sooner or later.

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.

Oli then does a great deep dive of microformats, going over the different ones defined by the community to date (there are 33 microformat specifications!) and covering some of the common patterns that you can use if you need to roll your own microformat. If you’ve been wondering how to use things like hCard, hCalendar, XHTML Friends Network (XFN), etc. in your own systems then definitely give this article a gander.

[via John Allsop]

Posted by Brad Neuberg at 5:30 am

3.8 rating from 5 votes


Comments feed TrackBack URI

This is great and all, but it does kind of make me wish that the whole xhtml thing didn’t fail so miserably.

Comment by genericallyloud — September 1, 2010

IMHO XHTML deserved to fail. Breaking on any error, no matter how small, was always a bad idea given who it is that produces content for the web. If they had just had better parsing rules for broken syntax, like HTML, it might have succeeded.

Comment by Joeri — September 2, 2010

@Joeri – Yeah, I didn’t mean I wish it was received better, I mean I wish it was conceived better. I agree that as it stood, it deserved to fail, I just also think that xml is a better language to do all of the extending than HTML + stuff. And I think many people were willing to use xml syntax, they just didn’t want to depart so far from what they knew, and what they had.

I know someone will likely say that HTML5 does have an xml serialization as well, but given that HTML is the focus, I’m not sure that it really matters. Maybe that would be something I should explore a little more, but I’ve seen no coverage for it.

Comment by genericallyloud — September 3, 2010

Leave a comment

You must be logged in to post a comment.