12 resources for getting a jump on HTML 5

~ 14 January 2009 ~

Recently I’ve seen a considerable amount of press on blogs and such regarding HTML 5, “the 5th major revision of the core language of the World Wide Web” (W3C). I have virtually no experience (yet) with HTML 5, so as I jump on the bandwagon and begin familiarizing myself with it, I thought I’d share some of the resources I’m reading along the way.

So far from what I’m learning, the consensus among several of these articles seems to be this: The world isn’t ready for HTML 5 at large just yet, but we can begin preparing for it by using common, semantic selector names (header, nav, section, etc.) — or even new attribute names — derived from HTML 5 within our HTML 4.01 or XHTML 1.x documents.

This is by no means an exhaustive list, just a start. In each of these you’ll find other resources to help you dig deeper.

A Preview of HTML 5 by Lachlan Hunt. Start with this one. The fact that it was published a year ago, coupled with increased interest in and experimentation with HTML 5 recently, makes it feel less like a preview and more like a “here’s what’s just around the corner” primer.

Preparing for HTML5 with Semantic Class Names by Jon Tan. A very thorough introduction, if not also the most well-formatted. “By using semantic class names, we give the information a semantic boost, and each chunk of related data is self-contained. However, it may have become obvious to some designers reading this that a side-effect of using this method, and eventually using HTML 5 elements themselves, will be lots of different content within containers of the same name.”

More on developing naming conventions, Microformats and HTML5 by Andy Clarke. Another article on the theme of transitioning to HTML 5 by using common, semantic selector names now. “If I could have one wish fulfilled today, it would be that all CSS framework developers would adopt the same naming conventions (and embed Microformats extensively too), so that people who are new to meaningful markup and CSS get off to the right start and use meaningful, logical rather than presentational id and class attributes.” Includes a demonstration file.

The Rise of HTML5 by Jeremy Keith. A behind-the-scenes for the UX London site, written in HTML 5, with plenty of accompanying links to HTML 5 resources. “It turns out that when it comes to the markup, HTML5 isn’t all that different to what has come before. It’s all the DOM gubbins—which should allow a more declarative approach to building web apps—that is the real hard stuff that requires browser support in order to work. If you’re not interested in that side of things, much of the HTML5 spec won’t even be relevant to you.”

An Event Apart and HTML 5 by Eric Meyer. Another behind-the-scenes for the new An Event Apart site. “I get the distinct impression that use of HTML 5 is going to cause equal parts of comfort (for the familiar parts) and eye-watering rage (for the apparently idiotic differences). Thus it would seem the HTML 5 Working Group is succeeding quite nicely at capturing the current state of browser behavior. Yay, I guess?”

HTML5 id/class name cheatsheet by Oli Studholme. To be honest, I don’t fully understand this cheatsheet. Yet, that is. It’ll come to me soon, I’m sure.

Semantics in HTML 5 by John Allsopp. Published just last week, this article includes an alternate take on the methodology of HTML 5 altogether: “Instead of new elements, HTML 5 should adopt a number of new attributes. Each of these attributes would relate to a category or type of semantics. For example, as I’ve detailed in another article, HTML includes structural semantics, rhetorical semantics, role semantics (adopted from XHTML), and other classes or categories of semantics. These new attributes could then be used much as the class attribute is used: to attach to an element semantics that describe the nature of the element, or to add metadata about the element.”

HTML 5 elements test by Bruce Lawson. Demonstrates how new elements in HTML 5 are rendered. Works only in the latest versions of most browsers, with an exception or two as documented.

I’ve been reading bits and pieces about this too, but has anyone got an idea when the spec will be released and then adopted by browser makers? It’s a little like thinking about Christmas in February for me. I read the spec and get all excited and then realize that it could be ages before I could take advantage of this new spec in my code.

Hi Cameron, thanks for linking to my test page. It’s not (necessarily) the case that it only works in the latest versions of browsers, simply that I only had access to the latest versions to test. (Except for IE).

It doesn’t work in Firefox 2 or Camino 1 because of a rendering bug in Gecko 1.9, but that’s fixed in FF3 and Camino 2.

Thank you for the link, Cameron. I’m honored to be mentioned in such esteemed company :) I’ve added a little more explanation so it should make more sense now. Here’s hoping the article is of use to someone!

This list is way better than my web dev advanced class in school. If you want a little insight to how they are preparing the future webmasters of america. Our book is Programming the World Wide Web, 4th Edition, Sebesta, Robert W…however I am pretty sure that I have surpassed my professors knowledge after the first few articles. Andy clarke’s documentation really helped out a lot! thanks