What HTML5 Features Are Safe to Use?

March 23, 2012

One of the great qualities of HTML5 is that even though it has not been standardized yet, you don’t have to wait to use it. Well, if you’re prudent about what HTML5 features you use, that is. For example, in my “Modern JavaScript: Develop and Design” book, I use several of the new HTML5 form elements as they get treated as plain text elements on browsers that don’t support HTML5. Similarly, several new form attributes will be ignored by browsers that don’t recognize them. By adopting select HTML5 features, you can provide a better experience to those using better, current browsers, and rest assured that those using older browsers, or Internet Explorer, will still be able to use your site. The question, then, is what HTML5 features are safe to use and what ones are not?

One good resource for answering that question is HTML5 Please, created by the same brilliant minds that created the HTML5 Boilerplate and the Modernizr library. HTML5 Please covers HTML5, CSS3, and related technologies and while the information is good, the interface is even better. Through a single page and some sweet JavaScript, you can find out all you need to know. There’s a search box at the top and a series of demo filters you can use to quickly find the feature you’re thinking about using. These filters include specific versions of IE, support on mobile device, including older ones, and more. For example, you can quickly find out that the new date input type can be used with caution along with a “polyfill”. As defined by Remy Sharp, a polyfill is:

…a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.

So, for example, you can safely use the new HTML5 elements, such as footer, nav, and article, if you also use the html5shiv polyfill.

An alternative resource is When can I use… The interface isn’t as clean as HTML5 Please, but the site provides a lot of information and uses table to present most of its data. When can I use… covers CSS, HTML5, JavaScript APIs, SVG, and much more.

Let me know if there’s a good HTML5 resource that you’ve come to rely upon!