Difference between HTML4 and HTML5

HTML5 is more sementic than HTML4 in every aspect. HTML5 includes sementic elements, like header, nav, article, section, figure, footer, but in html4, only div tag was there to do all these. Lets have a comparision of html4 with HTML5.

HTML4 and HTML5

HTML4 Structure

html4 Structure tags

HTML5 Structure

html5 Structure tags

With HTML5, our webpages are more meaningfull. Even Search Engines prefer HTML5 based websites. To improve seo of a website, html5 is very usefull. Search Engines can understand our websites well, they know where is header, and where is our content. Thus better search results.

Internet Explorer 8 and lower Compatibility.

As HTML5 becomew web standard 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 to get older browsers support.


<!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. Html5shiv supports Interner Explorer 8, 7 and lesser browsers.

Always use html5shiv.js in conditional comments. This can also improve webpage performance.

Click on button below to download.

View HTML5shiv Download HTML5shiv

Use of 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.