Migrate from Html4 to Html5

Advertisements

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

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Pure VPN Privide Lowest Price VPN Just @ $1.65. Per Month with Non Detected IP Lowest Price Non Detected IP VPN

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

Download Projects

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements