HTML4 Vs HTML5

HTML4 Structure

html4 Structure tags

HTML5 Structure

html5 Structure tags

Internet Explorer 8 and lower Compatibility.

As HTML5 Comes in 2009, Internet Explorer 8 and lesser version doesn't support HTML5 new Elements and attributes. For that we can write following code in head tag using conditional comments.


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Page</title>
	
<!--this condition is only for IE 8 and lesser browsers.-->

<!--[if lte IE 8]>            /*lte means LESS THAN & EQUAL TO IE8.*/ 
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>

<style>
header, nav, article, section, aside, footer{ 
display:block;
}                
</style>

<![endif]-->

<style>
.wrap{ width:960px; margin:auto}
article{ width:600px; float:left}
aside{ width:360px; float:left}
.clear{ clear:both}
</style>
</head>

<body>
	<div class="wrap">
		<header>
				//This is Header of Webpage
		</header>
		<nav>
				//navigation Menu will Come Here
		</nav>
		<article>
				//Content for article
			<section>
					//A Particular section of article
					
			</section>
		</article>
		<aside>
				//Right part of website
		</aside>
		<div class="clear"></div>
		<footer>
				//footer of the webpage 
		</footer>
		
	</div>
</body>
</html>		
		

HTML5shiv

If we want that all browsers ( including IE 8 and lesser) support HTML5 Schematic tags, we must use a third party script HTML5shiv.js. Click on button below to download.

View HTML5shiv Download HTML5shiv

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Page</title>

<!--[if lte IE 8]>        
   
<script src="js/html5shiv.js"></script>

<![endif]-->

<style>
.wrap{ width:960px; margin:auto}
article{ width:600px; float:left}
aside{ width:360px; float:left}
.clear{ clear:both}
</style>
</head>

<body>
	<div class="wrap">
		<header>
				//This is Header of Webpage
		</header>
		<nav>
				//navigation Menu will Come Here
		</nav>
		<article>
				//Content for article
			<section>
					//A Particular section of article
			</section>
		</article>
		<aside>
				//Right part of website
		</aside>
		<div class="clear"></div>
		<footer>
				//footer of the webpage 
		</footer>
	</div>
</body>
</html>		
		

Note: Now your website will support HTML5 new schematic tags in all browsers.