Migrate from Html4 to Html5
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.
| Html4 | Html5 |
|---|---|
| <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
| Html4 | Html5 | |
|---|---|---|
| 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.