The web is buzzing with chatter about HTML5. The only question we have is, has the time come to start using it?
Earlier this month the W3C (World Wide Web Consortium) announced that the future of XHTML looked uncertain, with that news came a deluge of posts discussing the potential of the new HTML5 standard. While its great that the web now has a clearer path to progress along, it is important to remember that the HTML5 specification is still in draft (and is not expected to be completed until 2021). Some people have taken the death of XHTML as bad news, however nobody can disagree that the two competing standards (XHTML and HTML) were beginning to stall progression of the web. With the transition to HTML5 comes a new lease of life and some exciting tools to make use of too.
For us web developers its time to start exploring HTML5, to see what it can do today and what it might be able to do tomorrow (once EVERY web browser gets up to speed). Gradual deployment of new HTML5 features over the next few years, that iteratively improve our websites and applications is the way to do it. Here’s what we’ve found out:
HTML5 is go
It’s beyond the scope of the toggle blog to get into ALL the code you need to get started with HTML5, we can however point you in the right direction and discuss the pitfalls we hit during our research. The best starting article we have come across is Smashing Magazine’s HTML5 and The Future of the Web. Its a great primer and pointed us towards an excellent HTML5 example for starting your first document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article,aside,dialog,figure,footer,header,
hgroup,menu,nav,section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Lets take a quick walk through. First off, is the new doctype at the top of the page. Its short and sweet compared to those of the past. Next up is the meta tags, on our test page we ran into a few problems with some of our standard meta tags. Passing the code through the HTML5 validator (work in progress) threw a few errors. It turns out that:
The http-equiv attribute is only allowed for the one case of setting the character encoding in HTML5…
via Google
Which means that certain meta tags:
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="content-language" content="en-gb">
Are no longer supported. This is no huge problem (most of the other meta tags seemed to pass without issue) but well worth knowing. The rest of the code is fairly standard for any web document, however the extra JavaScript include and CSS are very important for getting the new structural HTML5 tags to behave in Internet Explorer. The structural tags will form a large part of your new HTML5 documents and are summarised here. Using a JavaScript hack to get HTML5 to work in all browsers in not ideal and a part of me thinks we should continue to use <div> elements, with classes relevant to the structural tags of HTML5. It looks like we are not the only people to think this way.
For now that is as far as you can safely take HTML5 across all browsers, however there are tonnes of new features we can look forward to.
Looking forward
Here are some of our favourite features of HTML5, for a full list of what’s planned you may wish to keep one eye on the W3C’s HTML5 draft specification document (although its not particularly easy reading).
Geolocation (demo)
With HTML 5, you should be able to make web apps that can determine your location and provide you more relevant information.
Video / Audio tags (demo)
Providing everyone can eventually agree on a video and audio codec that is suitable (I’m rooting for OGG), we will soon be able to include media in the same way we include images. Simple tags without the need for both Flash and JavaScript. You may want to take a look at: video for everybody, a step towards achieving this today.
Canvas (demo)
The canvas element allows for scriptable bitmaps – essentially this means we can draw images in real time to the browser window. Most examples kicking around at the moment demonstrate graphing (pie charts etc) however this could be taken much further.
Local / offline storage (demo)
With applications moving to the cloud it makes sense for us to be able to access and edit our content when our internet connection is down or unavailable. Google realised this with Gears.
Content-Editable (demo)
Any elements with the “contenteditable” attribute set will be editable through the browser window. This has some huge implications in the way we manage content online and should lead to a new breed of content management systems. This is also one of the few HTML5 features already implemented in all of the latest browsers.
Our final recommendation is that you grab a copy of the HTML5 cheat sheet, its a useful resource to check the mark up your writing is supported and valid. At toggle we are going to begin exploring HTML5, it looks promising for the future of the web, but it is also worth remembering that some of the features being talked about might not even be the same (or exist at all) when the final draft rolls out.