HTML5 – more widespread than you think

I was browsing through last month’s issue of .net magazine when I came across an article by Remy Sharp about HTML5. I must admit that I was a bit out of the loop with regards to this new version of HTML5 and where it was at, and the reality surprised me.

Support and Misconceptions

First of all I thought that usage of HTML5 was a long way off, measured in years, and yet this is completely untrue. The main reason for this is that a date that has been bandied about with relation to HTML5 is 2022, with many people believing that this is when HTML5 will be widely used. However there is some misconception with this, and Ian Hickson, editor of the HTML5 working draft, but the record straight by pointing out this 2022 is the date when it is required that two browsers completely pass HTML5 test suites. It is available to use right now, with all the latest versions of Firefox, Safari, Opera, and Chrome supporting a wide range of features. Internet Explorer, as usual, is the browser that supports the least, but there is a way around this, but more about that later. The important date for HTML5 has been and gone, and this was October 2009 which was the last call for the working draft.

HTML5 – a quick glance

So how do you go about making your markup to validate as HTML5? The first thing you need to do is to change your DOCTYPE to the following:

<!DOCTYPE html>

How much easier than the current gubbins is that? One other noticeable feature relates to the style and script tags. HTML5 has default values for these, so instead of writing the usual

<script type="text/javascript"></script>

and

<style type="text/css"></style>

you can just write

<script></script>

and

<style></style>

as they default to text/script and text/css respectively.

After that, any previous valid XHTML and HTML will validate, although there are many new elements that are available within HTML5 that you might want to avail of. A full list of these can be found at the HTML5 editor’s draft but I’ll briefly mention a few select ones here:

Structure

Semantics

Interactivity

Browser compatibility

As mentioned above, the latest versions of the major browsers support a large number of these new features, but naturally, not all as of yet. Those that don’t rely on a new DOM interface to be available to the browser will work right now. Others, such as audio and video require a new DOM interface and thus will only work with certain browsers.

Internet Explorer is unable to see these elements by default, but can do so with the aid of some JavaScript, using a HTML5 shiv:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

If JavaScript isn’t enabled, then the document will be displayed as if CSS hadn’t been applied to the document.

A table of browser compatibility can be seen, showing how compatible current browsers are with HTML5.

Defaults

Since a lot of these elements are new, and browsers won’t be sure what to do with them, it makes sense to provide some default values for the block elements so they can be displayed correctly. Including the following

header, nav, section, article, figure, aside, footer { display:block; }

in your style sheet will do the trick.

Additional features

As well as new markup, there are a number of nifty new features that come along in HTML 5. One of these are Web Forms 2.0 which gets rid of the need for JavaScript powered form validation. As well as this, there are a number of JavaScript APIs that enrich the features available to the web developer:

All in all HTML5 is something exciting to look forward to, and I recommend you start looking into it and seriously consider using it in in your next design.

Resources

HTML5 Doctor

A List apart – Get Ready got HTML 5

HTML5 – A Simple Web Page Layout

Smashing Magazine – HTML5 and the Future of the Web

HTML5 Laboratory – experiments with HTML5