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">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
to HTML5 encoding:
<meta charset="utf-8">
<meta charset="utf-8">
<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>
<!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>
<!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">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 Doctype Syntax:
<!DOCTYPE html>
<!DOCTYPE html>
<!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>
<!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>
<!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.