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

by

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.

Leave a Comment