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.
W3C HTML 5 Spec. Like you’ll totally read every word of this, right?
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.”
HTML 5 differences from HTML 4. Not surprising: frame and frameset no longer allowed in HTML 5. Surprising: A document from the W3C that’s actually fairly readable.
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.
Wikipedia: HTML 5 if Wikipedia is your sort of thing for stuff like this.
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.
The Web Developer’s Guide to HTML 5 by W3C. I’ve not read this one yet, but it’s got colored boxes — a rarity from the W3C. That must mean it’s good.
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.

Got any other resources? Please share.

19 Comments

Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1 Jimmy ~ 14 January 2009

Hey! I actually did spend a day reading about 90% of that specification!

2 Luke Dorny ~ 14 January 2009

This is a hot topic for me right now.
Also, Steve Smith has been posting articles for January about HTML5 and CSS3. Check out the first article here:
http://orderedlist.com/articles/getting-started-with-html5

Thanks for the links! Finally a new dawn approaches.

3 Mike Taylor ~ 14 January 2009

Nice list!

I was just going to mention Steve Smith’s posts, but Luke beat me to it.

4 Rimantas ~ 14 January 2009

Just a couple days ago I started to work on HTML5 WordPress template for my blog. And I mean HTML5 with the proper elements, not just class names.

5 Jared Stein ~ 14 January 2009

Good list. I found HTML 5 vs XHTML 2 useful as well.

6 John Faulds ~ 14 January 2009

I’ve been thinking about this quite a bit the last few days too and was thinking of writing a post for my own blog to pose some questions I have about HTML5.

7 Rich Clark ~ 15 January 2009

Exactly what I was after cheers Mr Moll, I’ve just been asking (via his blog - http://www.brucelawson.co.uk/2009/html-5-elements-test/) Bruce about his sample page and he’s hopefully going to update it soon.

8 Kevin Shoesmith ~ 15 January 2009

A great list, thanks for putting it together.

May I dare hope that HTML 5 will help bring about the retirement (in the Blade Runner sense of the term) of IE6?

9 Half Nut ~ 15 January 2009

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.

10 bruce ~ 16 January 2009

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.

I’ve redesigned my blog in html 5+ wai aria, write up http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/

11 Aaron Irizarry ~ 16 January 2009

Thanks for this list… I need to start researching this for work, and just so others will think I am really smart :)

@Kevin Shoesmith awesome Blade Runner Reference

~ Aaron I

12 Oli Studholme ~ 16 January 2009

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!

13 Oscar Godson ~ 18 January 2009

Is it just a little bit too geeky to read the whole W3C Specs on HTML5? haha

14 Steve Williams ~ 18 January 2009

I seem to spend more and more of my time reading through W3 documents. I suppose this is a good thing for web designers and developers, but it distracts from the action of getting things done!

15 Chris Wallace ~ 18 January 2009

for those wondering when you can start using HTML5, you can start using it now, it just won’t validate because there is no final spec for it.

16 stephen ~ 18 January 2009

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

17 Jens Meiert ~ 21 January 2009

Feeling free to point to an overview of all HTML (5) elements, too.

18 Shane ~ 22 January 2009

I’m new to HTML5 too, so the list is welcome reading. Thanks.

19 Sonia Marras ~ 24 January 2009

Hmm about this HTML5 thing! I am so confused!!! I just read a blog post here: http://www.webscienceman.com/2009/01/24/html-xhtml-html5-future-html/Where Tommy Olsson is saying HTML5 is not really respecting semantics and should only be used for experimental uses only!
ANother stating we should jump in HTML5: http://willworkforart.net/articles/code-overhaul-how-and-why-i-started-using-html-5
What’s really going on?