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
andframeset
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
andclass
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

Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
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.
Nice list!
I was just going to mention Steve Smith’s posts, but Luke beat me to it.
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.
Good list. I found HTML 5 vs XHTML 2 useful as well.
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.
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.
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?
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.
I’ve redesigned my blog in html 5+ wai aria, write up http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
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
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!
Is it just a little bit too geeky to read the whole W3C Specs on HTML5? haha
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!
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.
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
Feeling free to point to an overview of all HTML (5) elements, too.
I’m new to HTML5 too, so the list is welcome reading. Thanks.
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?

Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…


Full-time and freelance job opportunities. Post a job...

A selection of fine reading, available for a limited time only:
- Recent job listings, testimonials, and 100th Kiva loan
- The ISO50 Field Guide to Color Management
- Upgrading the hard drive and memory in a refurbished 13" MacBook Pro
- Inspiring type: Libro di M. Giovambattista Palatino
- Randomness, vol. IX

CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.

Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.

HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Linkage:

1 Jimmy ~ 14 January 2009
Hey! I actually did spend a day reading about 90% of that specification!