HTML5 – more widespread than you think

←Back to listing

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

  • article – this represents a section of content that forms an independent part of a document or site, for example a magazine article or a blog entry.
  • header – represents the header of a section. Can be used more than once in a document.
  • footer – this element represents the footer of a section, which has probably been started with a header tag, but doesn’t have to.
  • nav – is used to enclose navigational blocks, a section of a document that links to other documents or to parts within the document itself.
  • section – represents a section of a document, typically with a title or a heading. This doesn’t replace the div element, and is only appropriate if there is a natural heading for it.

Semantics

  • figure – used to annotate illustrations, photos etc., optionally with a caption, which can be moved away from the main flow of the document without affecting it’s meaning.
  • mark – represents a piece of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
  • progress – used to represent the completion progress for a given task.

Interactivity

  • canvas – this can be used to render graphics on the fly via JavaScript.
  • audio and video – represent and audio and video stream respectively enabling you to embed media directly into the browser without needing any plugins.
  • source – is a child element to audio and video which allows for multiple media sources to be specified for those media types.

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:

  • Drag and drop – native JavaScript dragging which is also available across browser windows.
  • Inline editing – enabling users to edit content on the page without an editor.
  • Offline applications – allowing web applications to be used offline.

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