An HTML5 web page can be obtained by HTML4 without destroying any of the original content or structure of HTML4 web page. All modern browsers support the HTML5 semantic elements. Following are some example of migration of HTML elements from HTML4 to HTML5.
Example- (Following is an example of a sample HTML4 web Page)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<metahttp-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>
<divid="header">
<h1>MondayTimes</h1>
</div>
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>NewsSection</h2>
<div class="article">
<h2>NewsArticle</h2>
<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>NewsArticle</h2>
<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>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
The above example explained step by step-
Change in the HTML5 doc type-
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Example- <! DOCTYPE html>
Change in the HTML5 encoding information-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Example- <meta charset="utf-8">
Some modifications in the Semantic Elements of HTML5-
Following id's and classes for styling the elements are in the existing CSS-
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;
}
For above CSS styles HTML5 semantic elements can be written as follows-
body{
font-family:Verdana,sans-serif;
font-size:0.9em;
}
header, footer{
padding:10px;
color:white;
background-color:black;
}
section{
margin:5px;
padding:10px;
background-color:lightgrey;
}
article{
margin:5px;
padding:10px;
background-color:white;
}
nav ul{
padding:0;
}
nav ul li{
display:inline;
margin:5px;
}