Taking Advantage of HTML5 Today
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
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.
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.
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.
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
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.
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.
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!
HTML5 Tag Reference: http://www.w3schools.com/html5/html5_reference.asp
HTML5 Doctor: http://html5doctor.com/
Dive Into Html5: http://diveintohtml5.org/