A fast track to learning HTML5

Yesterday I was privileged enough to take part in a full day workshop on HTML5 organised by Technique. HTML5 is a subject I’ve been following to some extent, but not something I’d actually tried my hand at. It seemed like something that was a fair way from becoming standard, so I’d not really assigned it too much importance, or had the time to even contemplate it’s importance. However, at a bargain price, the workshop seemed too good an opportunity to turn down.

The workshop was led by Rich Clark of KMP Digitata and HTML5 Doctor and was all in all a great insight into the topic. The event itself was put together by The White Room, and sponsored by Northern Net, and was a great opportunity to soak in some knowledge at a very fair price, just over �100 for the day, which also covered a quality buffet lunch and endless tea and biscuits. It was a small group of 5, and I was joined by fellow fuse8‘er Joe Mason.

Rich started the day with an informative section on the history of HTML5 giving us an insight into the key people and organisations involved, also explaining how HTML5 had now become the industry recognised future spec, ousting the ‘too-pure’ XHTML 2.0. He then went on to discuss the design principles behind the spec and to cover some of the myths behind HTML5 (Come on Hixie! 2022!?).

My previous take on HTML5 was that it was designed to make the web more semantic, and to some extent it does. We covered some of the new elements such as <navigation> and <header> which certainly go some way to adding meaning to your markup, but it comes as a bit of a surprise to me that it doesn’t go further. We discussed the idea that the new elements were restricted to informational type content, perhaps too generic. I personally don’t understand the reason behind not including elements such as <product> or <review>. From dealing with microformats over the last few years it seemed like this would be the logical step forward, but I suppose the argument is just where you would stop with this kind of approach. I’m not gonna argue with some of the leading minds in the industry!

Anyway, we went through a few exercises designed to help us understand the current usage of the new elements, at which point it all started to sink in. A few things that really stood out as being beneficial were the ability to wrap a whole section (including headers, paragraphs, images etc) within a link attribute, and the fact you can now add multiple h1 tags within your markup, as long as each header sits within a root element, this has many benefits in my opinion.

Just before lunch we discussed some current accessibility issues with HTML5 and how to get around those by adding ARIA roles on elements. This wasn’t something I had heard of before, but it was presented in an easy to understand way and backed up with a helpful exercise to ensure that the information had sunk in. After lunch we then went on to discuss Web Forms 2.0, which is currently very well supported by Safari on the iPhone and the latest versions of Opera. Very clever stuff that massively improves usability on handheld devices, and also introduces a nice approach to in-browser error handling.

My background is mostly in design and front-end coding, but the next section was right up Joe’s street, in which Rich discussed the possibilities of audio, video and the <canvas> tag. I’d seen a lot of video examples flying around, and the possibilities look very exciting. It’s great to see that the markup is so simplified also. I for one can’t wait for the day when all video is embedded as such:

<video src="myAceVideo.ogv" controls></video>

It’s a bit step forward in how the web treats rich media, and the ability to create a certain amount of interaction with video opens up some real opportunities to create exciting content.

I came into the day not knowing what to expect, I came out excited with plans to redevelop my blog, experiment with a HTML5 iPhone specific site and keep on top of what is without doubt one of the most exciting developments in the industry. The workshop was faultless, extremely helpful and well organised. I’ll certainly be keeping an eye out for any future workshops put together by Technique, and will continue to read the great quality articles at HTML5 doctor, and I recommend that you do the same.