Ok, so there are a lot of articles out there on HTML5, especially since Google Wave arrived (because it’s the first major app to run on the language), but all the information that you need to know in order to start using it now is either too complicated, or spread out over various websites / articles / tutorials. Hopefully in this article we’ll be able to amalgamate and condense a lot of this information so that anyone with basic HTML knowledge can start using it.
Before I start I’d just like to say a big thank you to the Speak the Web guys who put a series of talks on in the north of England over the last two weeks. The gigs each had a speaker from Opera (amongst others) who enlightened many of us to the true potential of HTML5, and why we should start using it sooner rather than later.
As I’m sure you probably already know, Internet Explorer does not support HTML5. Surprise, surprise. Therefore the first thing that we need to do is:
1. Hack IE using Javascript
Unfortunately this is unavoidable if you want to use HTML5 across all major browsers. The only alternative would be to build your site twice, and no one wants to do that!
There is a really good site called HTML5Doctor which provides the perfect fix. They kindly wrote a bit of Javascript, which if included in your <head> will force IE to ‘see’ the following HTML5 elements:
<article>, <aside>, <audio>, <bb>, <canvas>, <datagrid>, <datalist>, <details>, <dialog>, <eventsource>, <figure>, <footer>, <header>, <hgroup>, <mark>, <menu>, <meter>, <nav>, <output>, progress>, <section>, <time>, and last but not least <video>.
You can download it here.
Obviously using Javascript isn’t the ideal fix because if you disable it then the page still won’t work. The only thing you can do to cater for this is to make sure the page degrades gracefully when JS is turned off.
HTML5 also suffers from problems in Firefox 2 and Camino 1 because these two browsers use the Gecko rendering engine. These problems are much harder to fix, but fortunately the browsers only have a tiny share of the market, so if you don’t want to ignore them then the HTML5Doctor site explains how to code for this too.
Now that we’ve got all the major browsers (IE, Safari, Chrome, Firefox, Opera) to recognise the code, we can:
2. Start using it!
One of the main benefits of HTML5 is that we are able to get rid of excess duplicate code. You no longer have to define everything by an ‘id’ or a ‘class’ because the default elements are already built in…
Amongst other elements, for your header you can simply use <header>, for your navigation use <nav>, for content areas use <section>, and for your footer, guess what, use <footer>. Also, within a <section> you can split up your content using <article>. This is good because browsers are able to weight the relevance of your content more accurately, thus helping with SEO, and it of course cuts down on coding time! You can still carry on using <div id=”header”> mind, this won’t stop working, it’s just that now there’s a better, more simple way of doing it.
There are another two major advances in HTML5 which will make life much more simple for developers. The first being:
3. The <video> tag
Now I’m not going to get into the whole “Flash is dead” debate because that’s another whole post, all I’ll say is this… In my opinion Flash will suffer from the <video> tag but it’s not going away any time soon, and one of the main reasons for this is security. With the HTML5 <video> tag there is no way of protecting your content, i.e. anyone will be able to download it. I’m personally all for ‘open’ content, and think that if someone is willing to put their video on the web, they shouldn’t mind if someone wants to save it. In fact, they should be glad that they want to save it! – because that means they like it and want to share it with people! But, once again, that is another debate for another time…
So, to use the <video> tag all you have to do is this:
<video src=video.ogv></video>
If you want to cater for people potentially not being able to see it then the easiest thing to do is this:
<video src=video.ogv>
<p>Your browser cannot view this content: <a href=”video.ogv”>Download video</a>
</video>
<p>Your browser cannot view this content: <a href=”video.ogv”>Download video</a>
</video>
There are all sorts of other things that you can do with video too such as: Customise controls, have native keyboard accessibility, and with a little hack or two you can even add subtitles, in different languages!
One annoying issue with video is that Apple have decided not to support the open source OGG format in Safari, instead opting for H264, so in order to cater for all browsers we need to include two sources, one to each filetype. The good thing is that the browser will automatically detect which one it needs to use and simply won’t display the other:
<video width=320 height=240 controls>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4″ type=”video/mp4″>
<p>Your browser cannot view this content: <a href=”video.ogv”>Download video</a>
</video>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4″ type=”video/mp4″>
<p>Your browser cannot view this content: <a href=”video.ogv”>Download video</a>
</video>
The second major advance that I’m really excited about is:
4. Form Validation!
Unfortunately this isn’t yet supported by most browsers, in fact I’m quite certain that Opera is the only one at the moment. However I wanted to include it just because I think it’s going to be brilliant…
Instead of messing around with Javascript you’ll be able to validate forms by simply applying an input type, and telling it whether it is required or not:
<input type=”email” required>
<input type=”date”>
<input type=”url”>
<input type=”date”>
<input type=”url”>
You can also use autofocus like this:
<input type=”email” required autofocus>
How simple is that!
5. To Conclude…
Even though we are far from full support, and the final HTML5 spec isn’t even finished yet, we can begin to use (most of) the things that are outlined above, and I really think that we should… The more people start using, the quicker the web will advance and the more pressure will be put on people like Microsoft to give in to web standards and support something properly for a change.
To follow on from this article next week we’ll be writing about why we think web designers / developers should stop designing for dated browsers and fully embrace new technologies such as CSS3 and HTML5. How can we move forward if we’re stuck in the past? …We should be making amazing things first and supporting old technologies second, not the other way around.
No comments:
Post a Comment