Which HTML5 tags can I use without worrying about browser compatibility?
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.
Solution 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.
Solution 5
You are looking for an HTML5 compatability matrix
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
Swagg
Updated on June 07, 2022Comments
-
Swagg almost 2 years
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.
-
gersande over 10 yearsDo 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)"
-
bradgonesurfing over 10 yearsYeah that is possibly true but in general google
html5 compatability
I'm sure there are many resources. -
iConnor over 10 yearsI must note that localStorage & fileReader are not HTML Tags, The OP asked what HTML5 tags have compatibility issues.
-
Paul over 10 yearsI'd gladly use
<!DOCTYPE html>
as the top line instead of those cursed long ugly things foisted on us in the before-times. -
Gromski over 10 yearsIf that's the only thing that changes between your HTML 4 and "HTML 5" documents... what's the point? :)
-
Paul over 10 yearsOh, 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...
-
Swagg over 10 yearsAlso, if you can specify, what is older IE? 6,7,8?
-
iConnor over 10 yearsGenerally Older IE is < IE9
-
cheezone over 10 yearsBe 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. -
iConnor over 10 yearsThanks for the info, any blog posts or some info that I can add into the answer regarding that issue would be good :)