Taking Advantage of HTML5 Today

Posted by Phil on November 28, 2009

I was asked in a formal situation recently, "If you were to build a new web site from scratch, which doctype would you use?".
Me: "Commercial site for a customer?"
"Just a site for the open web"
"Well, then I guess I'd have to say<!doctype html>"

I wish I had a camera for the look of shock and disbelief I was given in response.  But the fact of the matter is that for modern browsers, HTML5 is an excellent alternative for new sites and applications. With the upcoming production release of Firefox 3.6 - and the inevitable hype that is surrounding it, I felt it was an opportune time to look at how the current mainstream browsers provide for the HTML5 specification.

HTML5

HTML5 is a good candidate because current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode - even though they don't implement HTML5. If I want to actually take advantage of HTML5 elements, I can use some javascript to create a reference to those tags not recognised by, say, IE (e.g. document.createElement('article');) and then work with them as if they were native parts of the DOM.  It offers a cleaner, more concise set of tools to mark up your pages and style them.  The more nimble browsers - Firefox and Chrome in particular - are adding more support for the HTML5 tags with each successive version release.  But there are ways that you can provide for this markup in any browser right now and make it work for you.  Before I go any further, let me clarify that native support for <audio>, <video> and <canvas> tags (for example) can't be substituted with a hack or workaround, so I'm going to put those aside and focus only on the actual stylable rendering tags.

Why?

HTML5 presents a range of new elements that help you solve some of the more common structural problems encountered with current [HTML4.1] documents.  The key thing with the HTML5 doctype (below) is that because all modern browsers will recognise it, you can write your web pages in a completely standards-based way (CSS, HTML5, JavaScript) and not have to use a single browser-centric tag in order to do so.<!doctype html> The other consideration in identifying whether HTML5 is going to help you is understanding your own design problems and what new HTML5 elements are available to solve these.

What?

HTML5 introduces several new elements that aim to simplify and clarify the most common structural elements on today's web pages.  Most people will have heard about the canvas tag, possibly also the audio tag.  Fewer will know about hgroup, aside or nav. Making your markup conform to HTML5 now can be very useful, clean and maintainable as long as you adhere to stable features that work in browsers now.  In the same way that you wouldn't use anything in HTML4 or XHTML 1.x that doesn't work in browsers, neither would you start including every proposed HTML5 spec tag available just because it looks fun to use. The smartest approach is to use <!DOCTYPE html> with HTML4-like markup while honoring things that have been clarified in HTML5. HTML5 is about browser compatibility after all. The downside to using HTML5 now is that the spec can change quite often. This makes it important for you to keep up with the spec as it actively changes. Also HTML validation tools such as http://validator.nu/ or http://validator.w3.org/ aren't always up-to-date, but that shouldn't be a reason not to adopt HTML5 in its own right.

Who?

So which browsers are currently supporting HTML5 right now?  Well from the point of view of the doctype alone, Firefox, Chrome, Opera,  Safari and Internet Explorer all support <!doctype html>.  Yes, that's right - Internet Explorer 8 will support DOCTYPE switching for new DOCTYPEs.  Have a read of this article if you're really interested in the detail.  But even IE6 will accept the declaration without all the additional standards and references declarations, opting to default to HTML Strict. The use of new HTML5 tags is much more variable however.  Chrome and Firefox are often seen to compete on new element support and Opera has historically always been a pioneer in new standards adoption.  It is possible to get Internet Explorer and Firefox 2 to recognise and support these new tags with a little JavaScript smoke-and-mirrors: the HTML Shiv.

Summary

Over the next 12 months, you can expect to see interest, involvement in and adoption of HTML5 heat up considerably.  Having a vehicle for tidier, more meaningful markup that will also cement proper, defined standards in the industry (and see the final death-throes of IE's fiendish quirks mode) is an absolute asset to web developers and internet users generally.  So start getting involved and interested now!

Useful Resources

http://www.w3schools.com/html5/html5_reference.asp

Comments