HTML5 Migration

By | January 27, 2020

HTML5 migration means how to migrate from HTML4 to HTML5. How to migrate content from HTML4 page to HTML5 pages. In this chapter, HTML4 page is converted into HTML5 pages without destroying the content.

Example:-

HTML4HTML5
<div id=”menu”><nav>
<div id=”header”><header>
<div id=”content”><section>
<div class=”article”><article>
<div id=”footer”><footer>

In HTML4 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>HTML4 Page</title>
	<style>
		body{
			font-family: Verdana,sans-serif;
			font-size: 1em;
		}
		div#header,div#footer{
			padding: 12px;
			color: #fff;
			background-color: #000;
		}
		div#content{
			margin:4px;
			padding: 8px;
			background-color: #ccc;
		}
		div.article{
			margin:4px;
			padding: 8px;
			background-color: #fff;
		}
		div#menu ul{
			padding: 0;
		}
		div#menu ul li{
			display: inline;
			margin:5px;
		}
	</style>
</head>
<body>
	<div id="header">
	 <h1>Learn HTML Coding Times</h1>	
	</div>

	<div id="menu">
		<ul>
			<li>Home</li>
			<li>Blog</li>
			<li>HTML</li>
		</ul>
	</div>

	<div id="content">
		<h2>Section Start</h2>
		<div class="article">
			<h2>First Article</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis vitae, nemo quis est fugiat itaque, ducimus dolorem in laboriosam provident!</p>
		</div>
		<div class="article">
			<h2>Second Article</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum perspiciatis, amet odio rem voluptate odit quo quidem officia placeat nulla.</p>
		</div>
	</div>

	<div id="footer">
	<p>&copy; 2020 Learn HTML Coding,All rights reserved.</p>	
	</div>
</body>
</html>

HTML4 Doctype to HTML5 Doctype Change:-

HTML5 Doctype Syntax:

<!DOCTYPE html>

In HTML5 Page:-

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>HTML5 Page</title>
	<style>
		body{
			font-family: Verdana,sans-serif;
			font-size: 1em;
		}
		div#header,div#footer{
			padding: 12px;
			color: #fff;
			background-color: #000;
		}
		div#content{
			margin:4px;
			padding: 8px;
			background-color: #ccc;
		}
		div.article{
			margin:4px;
			padding: 8px;
			background-color: #fff;
		}
		div#menu ul{
			padding: 0;
		}
		div#menu ul li{
			display: inline;
			margin:5px;
		}
	</style>
</head>
<body>
	<div id="header">
	 <h1>Learn HTML Coding Times</h1>	
	</div>

	<div id="menu">
		<ul>
			<li>Home</li>
			<li>Blog</li>
			<li>HTML</li>
		</ul>
	</div>

	<div id="content">
		<h2>Section Start</h2>
		<div class="article">
			<h2>First Article</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis vitae, nemo quis est fugiat itaque, ducimus dolorem in laboriosam provident!</p>
		</div>
		<div class="article">
			<h2>Second Article</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum perspiciatis, amet odio rem voluptate odit quo quidem officia placeat nulla.</p>
		</div>
	</div>

	<div id="footer">
	<p>&copy; 2020 Learn HTML Coding,All rights reserved.</p>	
	</div>
</body>
</html>

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *