Which HTML5 tags can I use without worrying about browser compatibility?

I am building a web app for use on PCs. What are the HTML5 tags to stay away from to prevent compatibility issues with Browsers like IE8 and above?

Note: Most questions are 1-3 years old on this subject.

Solution 1:

You asked what HTML5 tags to stay away from.

Well Some of the tags from HTML5 from my knowledge were made for semantic reasons. like the following for example.

<article> <section> <aside> <nav> <header> <footer> ..ect

These are almost fine to work with, and just require a bit of CSS eg. display: block; to work normally in most browsers, though in older browsers ie. Internet Explorer you are required to create a element in Javascript in order for it to be compatible.

Here is an example.

document.createElement('article');

Would set the <article> element up for use in older Internet Explorer.

For more advanced HTML5 tags that require Javascript functionality to work are some like the following.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

These elements are harder to support/shiv in older browsers. Although I have included a link to cross browser polyfills at the bottom, although I haven't personally investigated them.

So I would say that any element that doesn't require Javascript functionality are perfectly fine to use with a tiny bit of cross browser support code.

If your targeting >IE8 then you should be fine if you use a shiv.

What do I call older browsers? < IE9

Browser support for HTML5 tags today is.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Are not supported by Internet Explorer less than 8 but can be fixed like this.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

And <audio> <video> <canvas> are not supported in < IE 9

The <embed> element has partial support in > IE8

You should also look into this tag.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

This meta tag tells Internet Explorer to display the page in highest IE mode available, instead of going into compatibility mode and rendering the page as IE7 or 8 would do. More info on that Here.

HTML5 Helper Links

For a Kick Start you can check out HTML5 BoilerPlate

For browser compatibility support tables you can check out - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

List of HTML5 Polyfills - https://github.com/Modernizr/Modernizr/wiki/...

Update

As mentioned in a comment

Be careful with the meta tag X-UA-Compatible. If you use something like html5 boilerplate that has conditional comments surrounding the element (this also happens with the html5 doctype IIRC), you may run into problems with IE9 forcing itself into IE7 standards mode even with the tag. IE strikes again

You may want to look into this, I have nothing to back this up at the moment.

Solution 2:

Generally, there are issues.

I've been told that your question is worded to ask about HTML 5 tags but it is also useful to look at the new features in light of any Javascript you might find or write.

In practice, the recommended method is to test for the existence of the feature rather than a specific browser. The Modernizr script may be helpful in this regard, but there are also reports of undetectable features in HTML5.

Some features like local storage go back to IE8.

Others, like FileReader, require IE10/Firefox21/Chrome27

For current information, try http://caniuse.com

Solution 3:

Write HTML 5 like you normally would and use Shims to ensure compatibility with older browsers. You only need to be careful with Javascript APIs really, because those are hardly shim-able. If you're trying to stick to baseline HTML 4 for compatibility, there's no point in using HTML 5.