Migrate from Html4 to Html5


Prev Tutorial Next Tutorial

Migrate from Html4 to Html5

In this tutorial I will show you how to change your website from Html4 to Html5 without destroying anything of the original content or structure.

In Html5 you no need to define footer area in css and after that apply this footer on web page with <div> tag, Html5 provides footer tag for footer area. Same like footer tag it have lot of new tags like, <header>, <article>, <header>, <nav>, <section> etc

In below table I will show you how to use predefined tag in place of using particular section with div tag.

Html4Html5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><section>
<div id="post"><article>
<div id="footer"><footer>

Change doctype and Character Encoding

Html4Html5
Doctype<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta charset="utf-8">
Character Encoding<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html>

Example in html

	
<!DOCTYPE html>
<html>
<head>
<style>
.header{
background:cyan;
height:100px;
}
.footer{
background:red;
height:100px;
}
.content{
background:#eee;
height:200px;
}
</style>
</head>
<body>
<div class="header">
<p>This is Header section</p>
</div>
<div class="content">
<p>Switch from Html4 to Html5</p>
</div>
<div class="footer">
<p>This is Footer section</p>
</div>
</body>
</html>

Result

This is Header section

Switch from Html4 to Html5

This is Footer section

Now i will show you how to convert html code into html5 by using predefined tags of html5.

Example in html5

	
<!DOCTYPE html>
<html>
<head>
<style>
header{
background:cyan;
height:100px;
}
footer{
background:red;
height:100px;
}
section{
background:#eee;
height:200px;
}
</style>
</head>
<body>
<header">
<p>This is Header section</p>
</header>
<section">
<p>Switch from Html4 to Html5</p>
</section>
<footer">
<p>This is Footer section</p>
</footer>
</body>
</html>

Result

This is Header section

Switch from Html4 to Html5

This is Footer section

In above code i will use direct header, section and footer tag in place of defining classes for all these.


Prev Tutorial Next Tutorial

Advertisements
z
Download Projects

Advertisements

Download WhatsApp Status Video

Buy This Ad Space Only $50 per Month, Ad Size 300X250 Contact on: [email protected] WhatsApp no. 8882538826

Google Adsense Advertisements