Should you be using HTML5 today?

html5-code

Should you be using HTML5 today?

Despite all the hype about HTML5, there are still many people (mainly web developers!) out there who are wondering whether or not they should use it in their next site. The main issues seem to be browser compatibility and the myth that HTML5 won’t be ready for mainstream usage until 2022.

To begin with, let’s bust this myth once and for all. For any specification to be deemed “ready”, it supposedly needs to be fully implemented in two browsers. If this rule was true, CSS2.1 also wouldn’t be “ready”, and do you hear people advising you to hold off on using that? No, and quite rightly so too. And the same should go for HTML5.

As for browser compatibility, the latest versions of browsers such as Firefox, Chrome, Safari and Opera all support various parts of the HTML5 specification, and older versions of these browsers support bits of the spec. The major headache, as always, is Internet Explorer. However, with the upcoming release of Internet Explorer 9, which will support HTML5 features, this is improving. That said, there will of course be many people who remain on older versions of IE and how will they cope with HTML5?

Pretty well, actually, and there are a lot of things you can do to ensure browser compatibility.

New elements

Whilst all of these browsers will happily accept the HTML5 doctype (<!DOCTYPE html>), Internet Explorer doesn’t understand any of the new elements and as such, will completely ignore them. This can be fixed using JavaScript. All you need to do is to add Remy Sharp’s html5shiv script to the head of your document, and IE versions 6 to 8 will know now what to do.

Some of the newer HTML5 elements – for example, input types such as email and url  – default to type text if the browser doesn’t understand them. So there’s no harm using them in your web page as a browser that takes advantage of them will do something funky, whereas a browser that doesn’t understand them will simply treat it as a normal text input field. Similarily input type attributes such as autofocus will simply be ignored by browsers that don’t know what to do with them.

Styling

Now that all browsers understand the elements, how will they look? There are no specific styles built into most of the browsers for these elements and thus they will all default to display:inline whereas some of them, e.g. section, article, head and footer need a default styling of display:block.

This is easily achieved by adding the following default CSS styles into your webpage:
article, aside, figure, footer, header, hgroup, menu, nav,
section { display:block; }

HTML5 Reset

Some developers like to use a CSS reset when starting a website from afresh, and this is usually a good idea as it allows all browsers to start with the same set of rules. There is a HTML5 reset available which you can use which will also automatically include the default styling above.

Modernizr

Modernizr by Paul Irish encompasses all this and also allows you to check browser compatibility for every HTML5 (and CSS3) feature on an individual basis. This can help with providing specific fallbacks for each HTML5 feature. It also adds some of the functionality mentioned above (creation of new elements for IE and default styling) automatically, so if you use Modernizr, you don’t have to add these separately.

Twitter , posterous and Burger King are just three major sites out there currently using Modernizr on their website to check for various HTML5 and CSS3 functionality.

No JavaScript?

Of course most of these are bypassed when a user has turned off JavaScript, especially when using IE. This is an issue, for sure, and is something that the developer will have to decide on themselves. As usual, the <noscript> element can be used to target these users, and different markup and content could be delivered that doesn’t make use of HTML5 elements and features.

Conclusion

There are a whole host of websites out there using HTML5 already and most of them work just fine. There are sites out there dedicated to showcasing websites using HTML5, such as HTML5 Gallery and 101 Best HTML5 Sites. They’re well worth taking a look at to see what others are doing.

Personally I think that there’s nothing to stop you from going out there and using HTML5 today in your websites. It works now and is only improving. So the answer to should you be using HTML5 today is a resounding yes!

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.