HTML5 for designers

HTML5 support will be available everywhere on the web - even on mobile devices.

HTML5 is currently making very slow progress towards formal support and certification by the World Wide Web Consortium (W3C), which oversees web standards. The final version is due... in 2022, by which time it will almost certainly be obsolete. In the meantime, coding standards and features may not be completely stable - but this doesn't mean you should wait until its features are frozen. The best time to start learning and using HTML5 is now. Some browsers, like Firefox and Safari, already support some of the features. Within a year or two you can expect a basic level of HTML5 support to be available everywhere on the web - even on mobile devices.

Confusingly, not everything that's been labelled a new HTML5 feature will be part of the official HTML5 spec. In practice, you can ignore this fact. If everyone is using a new feature, it doesn't matter whether or not it's officially sanctioned, in the same way that Flash has become a standard even though it's never been officially defined by any of the web standards organisations.

But what is it? HTML5 isn't so much a Flash killer as an attempt to make web pages more flexible and more like independent applications. There are two motivations: fixing some of the issues with current HTML code and simplifying standard features - so, for example, a new <nav> item explicitly defines navigation bar items, and makes them easier to design and work with; the second is extending web pages so they can include useful features that are familiar on the desktop, such as drag-and-drop and undo. Data will become more interactive, mobile and editable.

A key principle is that almost anyone will be able to define and add an application programming interface (API) to create new features. This already happens to some extent (the Google Maps API is a famous example) but HTML5 APIs may be richer and more complex. A simple example is the History API. Instead of a big list that appears in the browser, your new page will be able to interact with a browser's history, making it possible to simplify navigation without the usual back-button and breadcrumb trail hunt. A more complex example is MathML, a proposal for a web based math-language standard that will not only display symbols but process them. This isn't a feature that most designers will need to work with, but it's a demonstration of the kinds of options that are going to become possible.

Internally, HTML5 supports much more complex kinds of messaging and data exchange. Currently web pages ignore each other almost completely. The cross-document messaging in HTML5 creates an open data exchange system - with security - that makes it much easier to create feeds, pop-up messages and content aggregators, with optional scripted processing of incoming updates. Pages will also be able to store and remember complex information, and not just simple session cookies.

Media support is improved with simplified <video> and <audio> tags for embedding and playing media files. Designers are likely to find the new graphics options most interesting. A <canvas> tag creates an open play area that can be filled with whatever scripted action you can imagine. While this lacks some of the simplicity and accessibility of ActionScript, it's potentially more creative because there are few limits on what's possible. SVG vector graphics will be widely supported, further blurring the line between text, graphics, video and other kinds of content. Combined tags will make it easier to create video menus and Flash-like animated navigation buttons or to fill the screen with completely new effects created by the interaction between different types of content.

We can expect to hear a great deal more about HTML5 in future, as it will give designers the chance to produce completely new kinds of web interaction. For creatives, the toughest challenge isn't learning the new syntax but imagining some of the applications that are going to be possible.

HTML5 additions
What HTML5 brings to the table

<canvas>
Defines an area for drawing, which can be filled with JavaScript commands. There are no limits on the JavaScript you use, so you have a blank canvas that you can fill with scripted drawing operations. The one catch is that drawn objects can't be referenced through the DOM (Document Object Model) used in current browsers, so the JavaScript has to be self-contained, and you can't easily control objects with external code.

<video>
Embeds video. For audio, use the <audio> tag. <video> is like an updated version of the <img> tag - it works as easily, using similar syntax. Pick a source file, and your video is ready to play. More advanced options include explicit per-browser codec support and selection, progress updates and JavaScript transport control, so it's easy to build your own custom player window.

API support
HTML can now be extended with extra features. Basic features like web forms, audio/video and messaging can be added to projects more easily. Completely new features like drag/drop, undo and geocaching will also start appearing - and even newer feature libraries are likely to appear in the future.

Semantic tags
What the new tags mean for designers

<nav>
Defines items in a nav bar. Instead of having to hack your pages to add nav bar features, the <nav> tag tells the browser to handle nav intelligently, with optional rollover, hover and click support, and other essential effects.

<aside> and <article>
These tags offer simple semantic tagging. <aside> is content that it is related to but separate from its container, while <article> tags news feeds, blogs, forum comments or other content, which can be from an external source.

<header>
Not to be confused with the existing header formatting tags, this defines an introduction to a document. It can indicate above-the-fold summaries. When used with the new communication features, pages can easily aggregate <header> content from multiple pages to create a quick summary.