HTML4 and HTML5 are different in many terms. HTML5 is the latest version of HTML. HTML5 includes many tags from html4, like p, h1-h6, div, img, form etc. But some tags from html4 are removed in html5 as these tags were presentational. css is compulsory with html5.

HTML4 and HTML5

HTML5 is more sementic than HTML4. HTML5 includes sementic elements, like header, nav, article, aside, 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 tags
HTML4 Layout
html5 Structure tags
HTML5 Layout

With HTML5, our websites are more meaningfull to user. Even Search Engines prefers HTML5 based websites. To improve seo of a website, html5 is very usefull. Search Engines can understand a HTML5 based website in better way. They know where is header, and where is our content. Thus better search results.

Internet Explorer 8 and lower Compatibility.

As HTML5 becomes 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 old 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');
document.createElement('mark');
</script>

<style>
header, nav, article, section, aside, footer{ 
display:block;
}
mark{ background:#ff0; color:#000;}                
</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 with heading
        <section>
        	// section of article with heading
        </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

How to use 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.