The new HTML5 Markup Language has introduced several new element features not available in HTML4, for example elements like header, section, nav, footer, aside, and article.

Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly.

This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases.

It is possible to get HTML5 tags working in IE8 and earlier version by including the document.createElement() JavaScript code in the head of the HTML document. The basic idea is that by using document.createElement(tagName) to create each of the unrecognized elements, the parser in IE then recognizes those elements and parses them correctly. The following code shows the syntax for using the document.createElement.

document.createElement(“header” ); document.createElement(“footer” ); document.createElement(“section”); document.createElement(“aside” ); document.createElement(“nav” ); document.createElement(“article”);

This script means that, in the case of IE8 and earlier versions, scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they will not be displayed so as a precaution let’s add an explicit element to our code. (The element encloses content that should be displayed when a script is not executed. This content is also displayed in browsers that do not support the SCRIPT or in browsers which are configured not to run scripts).

Our noscript code will state the following: “ Please Note: This browser does not support HTML5, some elements are simulated using JavaScript. Enable JavaScript in order to display this page. ” and when added to the document.createElement script appears as shown below.

document.createElement(“header” ); document.createElement(“footer” ); document.createElement(“section”); document.createElement(“aside” ); document.createElement(“nav” ); document.createElement(“article”);

Please Note: This browser does not support HTML5, some elements are simulated using JavaScript. Enable JavaScript in order to display this page.

It is advisable to specify any element new to HTML5 as “block” in your CSS file otherwise declare them as inline so all browsers, including IE8 and earlier versions will handle them properly as shown below:

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

The document.createElement not only can be used to get HTML5 elements to function properly in IE8 and earlier browsers, but also as a means of checking for support of an element. To see how this is accomplished let’s check for support for the HTML5 canvas element.

Canvas provides an object that is used for drawing, rendering, and manipulating images and graphics on a document. The canvas object provides the surface on which to apply graphics and images. The actual drawing is done using the CanvasRenderingContext2D object, which provides the properties and methods that are used to create and manipulate graphics on a canvas object. Using the document.createElement() the JavaScript code would be written as follows:

var test_canvas = document.createElement(“canvas”) // canvas element var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method alert(canvascheck) //alerts true if browser supports...