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:
How much easier than the current gubbins is that? One other noticeable feature relates to the
script tags. HTML5 has default values for these, so instead of writing the usual
you can just write
as they default to
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:
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
headertag, 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
divelement, and is only appropriate if there is a natural heading for it.
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.
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
videowhich allows for multiple media sources to be specified for those media types.
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
video require a new DOM interface and thus will only work with certain browsers.
A table of browser compatibility can be seen, showing how compatible current browsers are with HTML5.
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
in your style sheet will do the trick.
- 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.
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