93

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.

5
  • 48
    Check caniuse.com and html5please.com for up-to-date browser compatibility information. Aug 14, 2013 at 5:02
  • @deceze any links to know more about shims?
    – Swagg
    Aug 14, 2013 at 5:06
  • 4
    HTML5 Boilerplate is a good resource Aug 14, 2013 at 5:09
  • 47
    IMHO you can't use anything in web development without worrying about browser compatibility...
    – Uooo
    Aug 14, 2013 at 7:23
  • 2
    See The three levels of HTML5 usage. Level 1 stuff can be used without a problem. Level 2 features degrade gracefully. Level 3 features require a polyfill if support for older browsers is a concern. Aug 21, 2013 at 8:38

6 Answers 6

100

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.

4
  • Also, if you can specify, what is older IE? 6,7,8?
    – Swagg
    Aug 14, 2013 at 5:27
  • 4
    Generally Older IE is < IE9
    – iConnor
    Aug 14, 2013 at 5:28
  • Be careful with the meta tag X-UA-Compatible. If you use something like html5 boilerplate that has conditional comments surrounding the <html> 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.
    – cheezone
    Aug 27, 2013 at 17:17
  • Thanks for the info, any blog posts or some info that I can add into the answer regarding that issue would be good :)
    – iConnor
    Aug 27, 2013 at 17:58
12

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

2
  • 1
    I must note that localStorage & fileReader are not HTML Tags, The OP asked what HTML5 tags have compatibility issues.
    – iConnor
    Aug 14, 2013 at 5:06
  • Oh, yeah. There is this big list of semantic tags that is getting pushed in HTML5 as a way to make your page more machine readable and perhaps more SEO friendly [or perhaps not]. There are a few new input elements. I suppose some of these might have issues in one or more browsers. I would think caniuse might have that information...
    – Paul
    Aug 14, 2013 at 5:14
8

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.

2
  • 7
    I'd gladly use <!DOCTYPE html> as the top line instead of those cursed long ugly things foisted on us in the before-times.
    – Paul
    Aug 14, 2013 at 5:08
  • If that's the only thing that changes between your HTML 4 and "HTML 5" documents... what's the point? :)
    – deceze
    Aug 14, 2013 at 5:09
4

For a quick comparison of what tags are available in what browsers, and what level of support for each tag, html5test.com is a great resource.

2

You are looking for an HTML5 compatability matrix

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

2
  • 2
    Do note: "This article's factual accuracy may be compromised due to out-of-date information. Please update this article to reflect recent events or newly available information. (March 2013)"
    – gersande
    Aug 14, 2013 at 5:04
  • 1
    Yeah that is possibly true but in general google html5 compatability I'm sure there are many resources. Aug 14, 2013 at 5:05
2

Also, for the best cross browser compatibility, i suggest you use this reset.css created by Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ This makes the elements that differ from a browser to another, to behave the same in all browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.