HTML5 Browser Support


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


HTML5 Browser Supports

Modern browsers support HTML5.

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

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

NoteYou 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 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 :

Example

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> :

Example

<!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 headline</h1>
     <p>My first paragraph. </p>
     <myHero>My first new element</myHero>
</body>
</html>

Try It! 

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


Internet Explorer Browser Issue

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

NoteInternet 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.


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>Rendering HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
 
  <body>
    <h1>My first post</h1>
    <article>
      TutorialFish.com has lots of wonderful tutorials!
    </article>
  </body>
</html>

Try It! 

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.