HTML5 Migration

by

To define a way to migrate from HTML 4 to HTML5, the HTML 5 migration is used.

Table: To convert an HTML 4 page into an HTML 5 page without any trouble in content or structure.

In HTML4 In HTML5
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div class=”article”> <article>
<div id=”footer”> <footer>

To change the HTML5 Encoding Information:

Change from:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

to HTML5 encoding:

<meta charset="utf-8">

Example 1: Creating a typical HTML 4 page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
<title>HTML 4</title>  
<style>  
body {  
    font-family: Cursive;   
}  
 
div#header, div#footer {  
    padding: 5px;
    text-align:center;
    color: white;  
    background-color: crimson;  
}  
 
div#content {  
    padding: 5px;  
    background-color: crimson;  
}  
 
div.article {  
    margin: 5px;  
    padding: 5px;  
    background-color: gray;  
}  
 
div#menu ul {  
    padding: 0;  
}  
 
div#menu ul li {  
    display: inline;  
    margin: 5px;  
}  
</style>  
</head>  
<body>  
 
<div id="header">  
<h1>Hello World!!</h1>  
</div>  
 
<div id="menu">  
<ul>  
<li>Home</li>  
<li>Services</li>  
<li>Blogs</li>  
</ul>  
</div>  
 
<div id="content">  
<h2>Hey</h2>  
<div class="article">  
<h2>Good Morning!</h2>  
<p>Today is a great day to learn.</p>  
</div>  
<div class="article">  
<h2>Lets start!</h2>  
<p>We will start with HTML.</p>  
</div>  
</div>  
 
<div id="footer">  
<p>© 2019 w3schools. All rights reserved.</p>  
</div>  
 
</body>  
</html>

Explanation:

In the above example, we are creating a typical HTML 4 page using id and classes for styling the elements.

Change HTML 4 Doctype to HTML 5 Doctype:

HTML 4 Doctype Syntax:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5 Doctype Syntax:

<!DOCTYPE html>

Example 2: Creating a typical HTML 5 page.

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8">
<title>HTML5</title>  
<style>  
body {  
    font-family: Cursive;   
}  
header, footer {  
    padding: 5px;
    text-align:center;
    color: white;  
    background-color: crimson;  
}  
 
section {  
    padding: 5px;  
    background-color: crimson;  
 
}  
article {  
    margin: 5px;  
    padding: 5px;  
    background-color: gray;  
 
}  
nav ul {  
    padding: 0;  
}  
nav ul li {  
    display: inline;  
    margin: 5px;  
}  
</style>  
</head>  
<body>  
<header>  
<h1>Hello World!!</h1>  
</header>  
 
<nav>  
<ul>  
<li>Home</li>  
<li>Services</li>  
<li>Blogs</li>  
</ul>  
</nav>  
<section>  
<h2>Hey</h2>  
<article>  
<h2>Good Morning!</h2>  
<p>Today is a great day to learn.</p>    
</article>  
<article>  
<h2>Lets start!</h2>  
<p>We will start with HTML.</p> 
</article>  
</section>  
<footer>  
<p>© 2019 w3schools. All rights reserved.</p>  
</footer>  
 
</body>  
</html>

Explanation:

In the above example, we are creating a typical HTML 5 page using the HTML 5 semantic elements.