HTML5 browsers support

There are many versions of browsers on the market today, and you can have some older browsers (HTML5 not supported) that support HTML5.

HTML5 browser support

Modern browsers support HTML5.

In addition, all browsers, both old and up-to-date, automatically process unrecognized elements as inline elements.

Because of this, you can handle "unknown" HTML elements in the Church browser.

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

Define HTML5 elements as block elements

HTML5 has set 8 new HTML semantic elements. All of these elements are block-level elements.

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

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

Add a new element to HTML

You can add new elements to HTML.

The instance adds a new element to HTML and defines a style for the element, named slt;myHero:

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

<body>

My first title was slt;/h1>

My first paragraph. </p>

MyHero's first new element, slt;/ myHero's;

</body>
</html>

Try it out . . .

The JavaScript statement document.createElement ("myHero") is intended to add new elements to the IE browser.

Internet Explorer browser issues

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

HTML5 browser support Internet Explorer 8 and earlier versions of IE browsers do not support this approach.

We can solve this problem with "HTML5 Enabling JavaScript" created by Sjoerd Visscher, "shiv":

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

The above code is a comment that means that when the version of the IE browser is smaller than IE9, the html5.js file is read and parsed.

Note: Domestic users should use Baidu Static Library (Google Resource Library is unstable in China):

<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" rel="external nofollow" ></script>
<![endif]-->

Html5shiv is a good solution for Internet Explorer. html5shiv mainly solves the new elements proposed by HTML5 that are not recognized by IE6-8, that cannot wrap child elements as parent nodes, and that CSS styles cannot be applied.

The perfect Shiv solution

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

<body>

<h1>我的第一篇文章</h1>

<article>
Learning technology, starting with W3CSChool!
</article>

</body>
</html>

Try it out . . .

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