/    /  HTML5 Migration

HTML5 Migration

 

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

 

HTML5 Migration

 

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>I2tutorials</h1>
</div>
<div id="menu">
<ul>
 <li>Home</li>
 <li>Serivces</li>
 <li>Contact</li>
</ul>
</div>
<div id="content">
<h2>Tutorials Section</h2>
<div class="article">
<h2>Tutorial1</h2>
 <p>enter contet,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,......................</p>
</div>
</div>
<div id="footer">
<p>© 2020 I2tutorials Times. All rights reserved.</p>
</div>
</body>
</html>

 

OUTPUT:

 

HTML5 Migration

 

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:

 

<!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>I2 tutorials</h1> 
</div>   
<div id="menu"> 
<ul> 
<li>Home</li> 
<li>Services</li> 
<li>Contact</li> 
</ul> 
</div> 
<div id="content"> 
<h2>Tutorials Section</h2> 
<div class="article"> 
<h2>Tutorial1</h2> 
<p>enter content here,,,,,,,,,,,......................................</p>  
</div>  
</div> 
<div id="footer"> 
<p>© 2020 I2tutorials Times. All rights reserved.</p> 
</div>   
</body> 
</html>

 

OUTPUT:

 

HTML5 Migration