HTML5 Migration

HTML5 migration specifies that how to migrate from HTML4 to HTML5. Let?s see how to convert HTML4 page into HTML5 page without any problem in content or structure.

Table:

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

Let's see a typical HTML4 page.

Example:

<!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>HTML4</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<div id="header">
<h1>JavaTpoint Times</h1>
</div>

<div id="menu">
<ul>
<li>Tutorials</li>
<li>Technology</li>
<li>Blog</li>
</ul>
</div>

<div id="content">
<h2>Tutorials Section</h2>
<div class="article">
<h2>Tutorial1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>Tutorial2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>

<div id="footer">
<p>� 2018 JavaTpoint Times. All rights reserved.</p>
</div>

</body>
</html>

Test it Now

Change HTML4 Doctype to HTML5 Doctype

HTML4 Doctype Syntax:

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

HTML5 Doctype Syntax:

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML5</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
div#menu ul {
    padding: 0;
}
div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>JavaTpoint Times</h1>
</div>

<div id="menu">
<ul>
<li>Tutorials</li>
<li>Technology</li>
<li>Blog</li>
</ul>
</div>
<div id="content">
<h2>Tutorials Section</h2>
<div class="article">
<h2>Tutorial1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>Tutorial2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id="footer">
<p>� 2018 JavaTpoint Times. All rights reserved.</p>
</div>

</body>
</html>

Next TopicHTML Color Names

← prev next →