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>Change HTML4 Doctype to HTML5 Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html> 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>
Leave a Reply