Mr. Deepak Verma
Web Developer
HTML5 Support

Learn HTML by M-Learnify

HTML
Lessons

HTML

HTML5

HTML Graphics

HTML Media

HTML APIs

HTML Examples

HTML References

HTML Forms

HTML5 Support

HTML5 Browser Support

You can teach older browsers to handle HTML5 correctly.

HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

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

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

Define Semantic Elements as Block Elements

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

To secure 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 with a browser trick.

This example adds a new element called <myHero> to an HTML page, and defines a style for it:

Example

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
    display: block;
    background-color: #dddddd;
    padding: 50px;
    font-size: 30px;
} 
</style> 
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.

Problem With Internet Explorer 8

You could use the solution described above for all new HTML5 elements.

However, IE8 (and earlier) does not allow styling of unknown elements!

Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.

Syntax For HTML5Shiv

The HTML5Shiv is placed within the <head> tag.

The HTML5Shiv is a javascript file that is referenced in a <script> tag.

You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.

You can download the latest version of HTML5shiv from github or reference the CDN version athttps://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Syntax

<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 on your site, you could reference the version found on the CDN site.

The HTML5Shiv script must be placed in the <head> element, after any stylesheets:

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>
← Back to Courses
Course Lessons

HTML

HTML5

HTML Graphics

HTML Media

HTML APIs

HTML Examples

HTML References

HTML Forms