❮ Html5 Websocket Html Colornames ❯

HTML5 Browser Support

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

HTML5 Browser Support

Modern browsers all support HTML5.

Additionally, all browsers, including old and new ones, automatically handle unrecognized elements as inline elements.

Because of this, you can "teach" browsers to handle "unknown" HTML elements.

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

Define HTML5 Elements as Block Elements

HTML5 defines eight new HTML semantic elements. All these elements are block-level elements.

To ensure that older browsers display these elements correctly, you can set the CSS display property to block:

Example

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

Adding New Elements to HTML

You can add new elements to HTML.

This example adds a new element to HTML, and defines styles for the element, named <myHero>:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Adding 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 Heading</h1>

<p>My first paragraph.</p>

<myHero>My First New Element</myHero>

</body>
</html>

The JavaScript statement document.createElement("myHero") adds the new element to IE browsers.

Internet Explorer Browser Issues

You can use the above method to add HTML5 elements to IE browsers, but:

| | Internet Explorer 8 and earlier versions do not support the above method. | | --- | --- |

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

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

The above code is a comment that ensures the html5.js file is read and parsed when the IE browser version is less than IE9.

Note: For users in China, please use the static resource library of this site (Google's resource library is unstable in China):

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

The html5shiv is a good solution for IE browsers. It mainly addresses the issue where HTML5's new elements are not recognized by IE6-8, making these new elements unable to act as parent nodes for child elements and unable to apply CSS styles.

Perfect Shiv Solution

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rendering HTML5</title>
  &lt;!--[if lt IE 9]>
  <script src="http://cdn.static.tutorialpro.org/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>

<body>

<h1>My First Article</h1>

<article>
tutorialpro.org —— Learning is not just about technology, it's about dreams!!!
</article>

</body>
</html>

The html5shiv.js reference code must be placed within the <head> element because the IE browser needs to load this file before parsing the new HTML5 elements.

❮ Html5 Websocket Html Colornames ❯