totn HTML

HTML: HTML5shiv

This HTML tutorial explains how to use HTML5shiv (a javascript workaround for IE8 and older) with syntax and examples.

Description

HTML5shiv is a javscript workaround to provide support for the new HTML5 elements in IE Browsers older than IE 9.

Syntax

The syntax for the HTML5shiv is:

<head>
<!--[if lt IE 9]>
  <script src="/js/html5shiv.js"></script>
<![endif]-->
</head>

Note

Example

We will discuss the HTML5shiv below, exploring examples of how to use the HTML5shiv in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, you would include the HTML5shiv as follows:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
<!--[if lt IE 9]>
  <script src="/js/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<article>
  <h1>Heading for Article</h1>
  <p>Text that appears under article</p>
</article>
</body>

</html>

In this HTML5 Document example, we have added HTML5shiv within the <head> tag. In this case, the HTML5shiv is a javascript file called html5shiv.js found in the /js directory.

If you did not want to download and store the HTML5shiv on your site, you could reference the version found on the Open Source Software CDN site, as follows:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<article>
  <h1>Heading for Article</h1>
  <p>Text that appears under article</p>
</article>
</body>

</html>

HTML 4.01 Transitional Document

HTML5shiv does not apply to HTML 4.01 Transitional.

XHTML 1.0 Transitional Document

HTML5shiv does not apply to XHTML 1.0 Transitional.

XHTML 1.0 Strict Document

HTML5shiv does not apply to XHTML 1.0 Strict.

XHTML 1.1 Document

HTML5shiv does not apply to XHTML 1.1.

Share on: