HTML5, the web of the future.

In March I had the pleasure of attending a workshop at South By Southwest titled “HTML5: Tales from the Development Trenches”, featuring Bruce Lawson (@brucel, web) – Opera and Martin Kliehm (@kliehm, web) – Namics. The discussion involved; what exactly HTML5 does right now at its current iteration, where it’s going and interesting examples of applying HTML5 practically. While the discussion may have been a little biased towards the use of HTML5 in Opera 10.5, it rightfully should have been. Opera 10.5 currently supports more features of the HTML5 draft than any other browser, with Firefox 3.6 closely trailing.

Most arguments nowadays about HTML5 seem to revolve around the demise of Flash content, or superiority of Flash over HTML5. The real beauty of W3C’s latest HTML spec lies in the simplicity of its implementation and ease of use for developers. HTML5 takes out all of qualms over coding time and browser compatibility, by unifying commonly used web application features into simple markup. It also helps
that the board that oversees the spec has representatives from all major browsers.

Let’s take an example of a date picker. In most instances a developer would create a stylish JavaScript date picker that would eventually have to be tested across multiple browsers, tweaked, retested and a day or so later, the developer would probably end up choosing a pre-made open source solution and customize the style sheet. HTML5 (currently) leaves the styling up to the browser and requires a refreshingly simplistic piece of familiar code, the input field accompanied by the date type. The input field itself will support types other than date such as: range, email and search as well as doing validation for each. That means instead of writing the code to validate an email address, the browser will do that for you.

Without getting too technical with specific examples, some other things to note include: geolocation, orientation*, multitouch support, web storage (mysql), drag and drop, file api (to modify images in the browser before uploading), video and audio embedding and WebGL (hardware accelerated 3D rendering). HTML5 is also touted as being better for screen readers, SEO and Accessibility. One of the more compelling examples I saw for HTML5 video and accessibility, was user generated multilingual closed captioning for video. The user creates <span> tags with a data-begin and data-end property in order to set start and end points on the video time line for each block of captioning. Additionally, during playback you can switch languages instantly as the video is playing. See the demo here.

It may be difficult to start coding your sites in HTML5, as the spec is still a draft and only a few browsers support it, it is great to know that ALL of the major browsers will be supporting and are currently working on HTML5 complaint browsers. While documentation on the HTML5 spec is intended for browser developers, there is new information available targeted towards web developers. A much easier to follow consolidated guide that the W3C frequently updates, intended at giving you the information you need to start coding right away. My suggestion is to get a modern browser that supports HTML5 and start coding to stay ahead of the curve.

* requires an accelerometer and firefox 3.6 (works on macbook pro).