Peter van Grieken

As you probably know by now, HTML5 is a working draft and it's the successor of HTML 4.01 and XHTML 1.0. HTML5 aims to reduce the need for browser plugins and it's coming at us at full speed. As a forward thinking web designer you can't wait to use all the new features, can you?

Or maybe you're wondering why you should use HTML5 now, most of the fuss seems to be about the <canvas>-element and structural elements like <header> and <article>, but there's so much more to discover. So why should you start using HTML5?

I've summed up 3 great reasons.

1 - Web Forms 2.0: Forms on Steroids

I don't even know where to begin on this one. Form behavior has been upgraded so much that it will change the way you will use them drastically.

With the implementation of Web Forms 2.0 into HTML5, you can say goodbye to the HTML forms you used to know. Think of it as your old forms on steroids that will simplify the way you work with them. Unfortunately Internet Explorer (8 and below) and Firefox (3.7 and below) don't support these new features, but I can't wait to to get my hand dirty and play around with it.

So, what's so special about it?

Look at all those input types! Instead of using a plain old text-field and adding JavaScript behaviour yourself, you will be able to use input fields for multiple files (Yes, mul-ti-ple!), input types to choose a color, date- and time-pickers or sliders to pick a number from a range.

All that is possible in HTML5 without the extra need for client-side scripting. Isn't that great?

Wait till you hear about form validation.

With built in form validation you no longer have to create scripts to test each field for valid input, just use <input type="email"> and the browser will immediately tell you if it contains a valid e-mail address. You can even use the pseudo-classes :valid and :invalid to style these fields in CSS.

Also, HTML5 introduces the ability to add extra validation conditions, like: required, read-only, disabled, autofocus, a minimum and a maximum accepted value or length.

Of course, for extra security, you still need to validate all incoming data in your back-end code, but just check out these two example pages to see what you can do without a single line of JavaScript.

So why shoud you use it now?

There's only one problem with all these new features: the two major browsers (Internet Explorer and Firefox) don't support it yet. 

Fortunately, these features degrade pretty graceful, if you use an input type that your browser doesn't recognise, it will automatically fall back to "text". That way you can still build your own JavaScript validation for browser that don't support this (you can detect this by using the Modernizr library)

Also, if you want to play with Web Forms 2.0, thanks to the efforts of Weston Ruter, you can use these features in any browser by using this awesome JavaScript library.

2 - Custom Data Attribute: Store anything you want

Ever had to build some JavaScript and wondered where to put certain information?

Imagine you have an unordered list and when a visitor hovers over a certain list-item, you want to show an image somewhere else on the page. There has to be some relation between the hovered element and the image you want to show, so you would have to (ab)use an attribute to create this relation, maybe use title or class to store the id of the image that has to be shown. 

That's pretty nasty, I would prefer some element that I can use to store custom data. Not abuse the the rel or some other attribute. Of course, you can create a custom attribute, but then your page won't validate. Why can't I do both? Create a custom attribute AND have a validating page.

You guessed it: In HTML5 you can.

The introduction of custom data attributes allows us to embed any data we want to into the HTML page without showing it to the visitor or using dirty tricks.

In the example above, I would use something like:

<li data-hoverimage="image14">Hover over this li to see image 14</li>

And (suppose I use jQuery) my JavaScript would look like this:

$('li').hover( function() { $('img#'+$(this).attr('data-hoverimage')).show() } );

This is a perfectly valid way to do this and it will give you so much possibilities. Just start the attribute name with data- and you can store anything you want.

So why shoud you use it now?

Because finally there's way to store extra (non-visible) data in your HTML documents that also passes validation.

It will work in any browser and it will simplify your development process. You can start using is anytime you want, so why not start now?

3 - New Structural Elements: Semantics, semantics, semantics.

How can I write an article about HTML5 and not mention the new structural elements like <header> and <nav>. In the early days of the World Wide Web, HTML was all about semantics. HTML (and its predecessor SGML) were created by Sir Tim Berners-Lee to describe (scientific) documents. Berners-Lee probably never expected his markup language to lead to things like YouTube and have such an impact on the way we consume information today.

Soon after those early days, there was the need for markup to make a document somewhat visually attractive. We all know that lead to presentational tags like <center>, <b> and <font> and, after browsers started supporting CSS, the web standards movement.

With the introduction of CSS, we could apply styles to our HTML documents without losing semantics by using semantically neutral elements like <div> and <span>. Unfortunately, in my opinion, semantically neutral is not the same as semantic. A <div id="header"> is just a nice trick and the least dirty way to add presentation to your semantic markup, but we can hardly call it structure or semantics, do we? HTML was designed as a way to describe scientific documents and it wasn't in line with the way it is used these days.

Finally, HTML5 introduces more elements to add structure to your documents, elements like <header>, <footer> and <nav> allow us to define the real structure of our websites. With the <article>-tag you can define your news or blogposts and with the re-introduction of the <menu>-tag you can finally put your navigation menu in a semantic tag (come on, <ul> is not that meaningfull). A complete list of all the new tags can be found in this great article.

This way, HTML is more in line with the practical use for websites and it creates all sorts of ways to use real semantic markup and still be able to create a visually attractive website.

So why should you use it now?

This part of HTML5 is already here so there's no need to wait for browser support and with the right (HTML5) doctype, your page will validate perfectly.

Oh wait, I almost forgot about Internet Explorer. 

None of the current IE versions support any of the new elements, so whatever CSS you apply to the elements, it will be ignored by IE. Thankfully there's an easy fix for this by using document.createElement('elementname') in JavaScript for each element you want to use or including this script into your page.

1 Reason not to use HTML5 yet

If you rather play it safe, you better wait until all browsers support HTML5. At this moment, it is still a working draft and it's estimated to become a candidate recommendation in 2012, but it will take much longer for older browsers to die and newer browsers to support everything in the HTML specs.

At this moment, you will have to use JavaScript hacks or fallback code to make sure your page will keep working in all browsers if you extensively use HTML5. Extra JavaScript or hacks means slower page loads (larger pagesize and slower rendering) and more coding. If you don't want  that, HTML5 is not for you yet.

My advice

If you want to use HTML5, you can. There are features out there that are supported by all browsers, so can start using them right now and those features will make your life as a web designer a lot easier.

But before you jump in to HTML5:  Be prepared. Know which features are supported by which browser and build your websites with the "Degrade Gracefully" and "Progressive Enhancement" principles in mind.

Don't just use it because you like to play around with it, but use it with care. Believe me, your clients don't care if their website has an HTML or and XHTML doctype, as long as it works.

Want to know more about HTML5?

Check out these other great articles and resources about HTML5

The official FAQ on HTML5 by WHAT Working Group.

Compatibility tables for several features in HTML5.

A Preview of HTML5 on Alistapart.

Practical HTML5 by Bobby van der Sluis.