HTML 5 Browser Support

You can make some older browsers (not supporting HTML5) support HTML5.

HTML5 browser support

Modern browsers support HTML5.

In addition, all browsers, including the old and newest, will automatically handle unrecognized elements as inline elements.

Because of this, you can “teach” the browser to handle “unknown” HTML elements.

You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.

Define HTML5 elements as block elements

HTML5 defines 8 new HTML semantic (semantic) elements. All of these elements are block-level elements.

In order to allow older browsers to display these elements correctly, you can set the CSS display property value to block :

header , section , footer , aside , nav , main , article , figure { 
	display: block; 
 }

Add new elements to HTML

You can add new elements to HTML.

This instance adds a new element to HTML, and defines the style for the element, the element name is <myHero> :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Add new elements to HTML</title>
		<script>document.createElement("myHero")</script>
		<style>
			myHero {
				display: block;
				background-color: #ddd;
				padding: 50px;
				font-size: 30px;
			} 
		</style> 
	</head>

	<body>

		<h1>My first title</h1>

		<p>My first paragraph.</p>

		<myHero>My first new element</myHero>

	</body>
</html>

The JavaScript statement document.createElement(“myHero”) is to add a new element to the IE browser.

Internet Explorer browser issues

You can use the above methods to add HTML5 elements to the IE browser, but:

Internet Explorer 8 and earlier IE browsers do not support the above methods.

We can use “HTML5 Enabling JavaScript”, “ shiv  created by Sjoerd Visscher to solve this problem:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The above code is a comment, which is used to read the html5.js file and parse it when the version of the IE browser is less than IE9.

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif] -->

It is a better solution for IE browser html5shiv. html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.

The perfect Shiv solution

Example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>HackerThink</title> 
		<meta charset="utf-8">
		<title>Rendering HTML5</title>
<!--[if lt IE 9]>
<script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
	</head>

	<body>

		<h1>My first post</h1>

		<article>
			Novice tutorial-not only learning technology, but also dreaming! ! !
		</article>

	</body>
</html>

The html5shiv.js reference code must be placed in the <head> element, because the IE browser needs to load the file first when parsing new HTML5 elements.