Search code examples
htmlbrowsercross-browsercompatibility

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

  • 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> ..etc

    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.