HTML5 Browser support
You can teach older browsers to correctly handle HTML5.
HTML5 Browser Support
HTML5 is supported in all modern browsers.
In addition, all browsers, both old and new, automatically treat unrecognized elements as inline elements.
Because of this, you can “teach” older browsers to work with HTML elements that are “unknown” to them.
You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.
Define Semantic Elements as Block‑Level Elements
HTML5 defines eight new semantic elements. All of them are block‑level elements.
To ensure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Add New Elements to HTML
You can also add new elements to an HTML page using a browser trick.
In this example, a new element named <myHero> is added to the HTML page and its style is defined:
Example
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
Try it Yourself »
The JavaScript declaration document.createElement("myHero") is required to create a new element in IE9 and earlier versions.
Problem with Internet Explorer 8
You can use the solution described above for all new HTML5 elements.
However, IE8 (and earlier versions) does not allow styling of elements it does not recognize!
But fortunately, Sjoerd Visscher created HTML5Shiv! HTML5Shiv is a JavaScript workaround that enables styling of HTML5 elements in Internet Explorer versions prior to version 9.
You will need HTML5shiv to ensure compatibility for IE browsers older than IE9.
Syntax for HTML5Shiv
HTML5Shiv is usually placed inside the <head> tag.
HTML5Shiv is a JavaScript file referenced by a <script> tag.
You can use HTML5Shiv when you use new HTML5 elements such as <article>, <section>, <aside>, <nav>, <footer>.
You can download the latest version of HTML5Shiv from GitHub or link to the CDN version https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js, (or alternatively a newer version on our site: html5shiv.js)
Синтаксис
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
HTML5Shiv Example
If you do not want to download and store the HTML5Shiv script on your own site, you can reference the version provided on a CDN.
The HTML5Shiv script is usually placed inside the <head> element, after any style sheets:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>
</section>
</body>
</html>
Try it Yourself »
Note from the admin W3SchoolsEn. The Best. In fact, it is better to place the HTML5Shiv script reference at the very end of the webpage, just before the </body> tag (to speed up page loading).
