So, can I use HTML5 now?
Even with all the hype surrounding HTML5 and how its the way forward, it is still going to be a slow transition from HTML4.01 & XHTML1.0. Developers will need time to get up to speed, test all the features and for the browsers to catch up, but the biggest hurdle is the fact that it will take users a long time to move from the older browsers to the newer HTML5 compatible browsers.
Is there a way to move forward?
Yes, with a few extra steps. There are a few quirks we need to get past if we’re going to start using this today.
First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.
Once HTML5 is more widely supported, display:block; can be removed, as it will be included in the browser default styles.
Supporting IE
There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
HTML5 will assume type="text/javascript" on any script element, so it need not be included. Once again, making things simple.
A word of caution though, the solution suggested above is client based and if the client scripting fails, the browser(IE6) might not take the CSS applied to the new elements and may collapse the site. It is not the best option for production, but an option nonetheless.
Semantic DIV naming
Perhaps a soft transition may be a better way to prepare for HTML5. You could align your DIVs with the new HTML5 elements e.g aligning <div class="header"> and <div class="footer"> with <header > and <footer > elements. This will help you get used to the names themselves and also the new functionality and nesting that they want you to do with the new elements.
There should not be major consequences with using the new <!Doctype HTML >
2 Responses to “So, can I use HTML5 now?”
[...] is HTML5 ready to be used today? YES …but you might need a little tweaking for today’s browsers to work with [...]
[...] While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. [...]