HTML5 Migration
Migration from HTML4 to HTML5
The HTML5 have the new features and improvements to existing features. HTML5 includes all the elements that are present in the HTML4 and XHTML. It includes the redefinition of the existing markup elements. The redefinition of the HTML4 elements to the HTML5 is given below:
The simplest and most common example of this is the redefinition of the DIV element that contained the id attribute and had the assigned value header, footer, article, menu, and content. The revolution in HTML5 is that these assigned values are now the elements as:
< header >, < footer >, < nav >, < section >, and < article >. Let us illustrate the redefinition of HTML4.
HTML4 | HTML5 |
< DIV id = “header” > | < header > |
< DIV id = “menu” > | < nav > |
< DIV id = “content” > | < section > |
< DIV id = “article” > | |
< DIV id = “footer” > | < footer > |
Difference between an HTML4 and HTML5 document
HTML4 Document
Consider the following document:
EXAMPLE:
< ! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd” >
< html >
< title > The HTML4 Document
body {
font-family: Helvetica;
font-size: 0.9em;
}
div # header, div # footer {
padding: 15px;
color: maroon;
background-color: red;
}
div # content {
margin: 5px;
padding: 10px;
background-color: grey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: yellow;
div # menu ul {
padding: 0;
}
div # menu ul li {
display: inline;
margin: 5px;
}
style >
head >
< body >
< div id =”header” >
< h1> Daily Newspaper h1>
div>
< div id =”menu” >
< ul >
< li > Entertainment News < / li >
< li > Sports News li >
< li > Weather News li >
ul >
div >
< div id = “content” >
< h2 > Entertainment News < / h2 >
< div class = “article” >
< p> This portion contains NEWS about movies, games, etc. < / p >
< / div >
< div class = “article” >
< h2 > Sports NEWS h2 >
< p > This portion contains Sports NEWS < / p>
div >
div >
< div id = “footer” >
< p> This is Daily Newspaper < / p>
< / div >
< / body >
< / html >
This will produce the following result:
Now we consider HTML5 document and the differences between them.
HTML5 document
We are changing the above document to HTML5 document. Consider the following example:
EXAMPLE
< ! DOCTYPE html>
< html >
< head >
< meta charset = “utf-8” >
< style>
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, footer {
padding: 15px;
color: maroon;
background-color: red;
}
section {
margin: 5px;
padding: 10px;
background-color: grey;
}
article {
margin: 5px;
padding: 10px;
background-color: yellow;
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
< /style >
head >
< body >
< header >
< h1> Daily Newspaper < / h1>
< / header >
< nav >
< ul >
< li > Entertainment News < / li>
< li > Sports News < / li >
< li > Weather News < / li>
< / ul>
< / nav>
< section >
< h2> Entertainment News < /h2>
< article>
This portion contains NEWS about movies, games, etc. < /p>
article >
< article>
< h2> Sports NEWS h2>
This portion contains Sports NEWS p>
article >
section>
This is Daily Newspaper < /p>
< /footer >
body >
html >
This will produce the same result that is as follows:
From the above two documents, we can conclude that:
- The DOCTYPE declaration of HTM4 is
< ! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd” >
whereas, the DOCTYPE declaration of HTML5 document is simply
< ! DOCTYPE html >
- The character encoding in the HTML4 document is:
and the character encoding of HTML5 document is:
- We used the < DIV> element for the header, footer, menu, and article etc in the HTML4 document. But in HTML5 document we used the semantic elements < header >, < footer >, < article >, < nav >, etc.
- We used the HTML5Shiv to style the unknown elements and to support them in the older versions of internet explorer.
- The < menu > element in the HTML4 document is replaced by the < nav > element in the HTML5 document.
Difference between the < article>, and element
The section element is used to represent a generic section of the HTML document or the HTML application. The section element should not be used for styling or for the scripting purposes only.
The article element can be considered as the section element. There is a small difference between the article and section element. The article element is used to specify the complete composition in a page or document or application whereas, the section element represents a section of a page or document.
The DIV element is used to mark the block of document as a group. Then this element is used to specify the properties of this group. The DIV element does not affect the appearance of the document.
element within element
Consider the following example to illustrate an element within an element.
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< meta charset = “utf-8” >
< title > The HTML5 Document title >
< !– [if lt IE 9] >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
< / script >
< ! [endif] –>
< style >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
< /style >
< / head >
< body >
< header >
< h1> Daily Newspaper h1 >
< / header >
< nav >
< ul >
< li > Entertainment News < / li >
< li > Sports News < / li >
Weather News li >
ul >
< / nav >
< article >
< h2 > Entertainment News < / h2 >
< article >
This portion contains NEWS about movies, games, etc. < / p >
< / article >
< article >
< h2 > Sports NEWS < / h2 >
< p > This portion contains Sports NEWS p >
article >
< / article >
< footer >
This is Daily Newspaper < / p >
< /footer >
< / body >
< / html >
The above example will produce the following result:

In the above example, the article “Sports NEWS” is within the article “Entertainment NEWS”.
element within the element
Consider the following example:
EXAMPLE
< ! DOCTYPE html>
< html >
< head >
< meta charset = “utf-8” >
< title > The HTML5 Document < / title >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
script>
< style >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< / head >
< body >
< header >
< h1 > Daily Newspaper h1 >
header >
< nav >
< ul >
Entertainment News li >
Sports News li >
Weather News li >
ul >
< / nav >
< article >
< h2 > Entertainment News < / h2 >
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2 > Sports NEWS h2 >
This portion contains Sports NEWS p >
div >
article >
This is Daily Newspaper p >
body >
html >
This will produce the following result:

element in element in element
Consider the following example:
< ! DOCTYPE html >
< meta charset = “utf-8” >
The HTML5 Document title >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< body >
< header >
< h1> Daily Newspaper h1>
header >
< nav >
< li> Entertainment News li >
- Sports News < / li >
- Weather News li >
ul >
nav >
< article >
Entertainment News
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2> Sports NEWS h2 >
< p> This portion contains Sports NEWS p >
< /div >
< /section >
< /article >
< footer >
< p > This is Daily Newspaper p >
footer >
< /body >
html >
This will produce the following result:

The section element is used to represent a generic section of the HTML document or the HTML application. The section element should not be used for styling or for the scripting purposes only.
The article element can be considered as the section element. There is a small difference between the article and section element. The article element is used to specify the complete composition in a page or document or application whereas, the section element represents a section of a page or document.
The DIV element is used to mark the block of document as a group. Then this element is used to specify the properties of this group. The DIV element does not affect the appearance of the document.
element within element
Consider the following example to illustrate an
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< meta charset = “utf-8” >
< title > The HTML5 Document title >
< !– [if lt IE 9] >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
< / script >
< ! [endif] –>
< style >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
< /style >
< / head >
< body >
< header >
< h1> Daily Newspaper h1 >
< / header >
< nav >
< ul >
< li > Entertainment News < / li >
< li > Sports News < / li >
ul >
< / nav >
< article >
< h2 > Entertainment News < / h2 >
< article >
This portion contains NEWS about movies, games, etc. < / p >
< / article >
< article >
< h2 > Sports NEWS < / h2 >
< p > This portion contains Sports NEWS p >
article >
< / article >
< footer >
This is Daily Newspaper < / p >
< /footer >
< / body >
< / html >
The above example will produce the following result:
In the above example, the article “Sports NEWS” is within the article “Entertainment NEWS”.
element within the element
Consider the following example:
EXAMPLE
< ! DOCTYPE html>
< html >
< head >
< meta charset = “utf-8” >
< title > The HTML5 Document < / title >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
script>
< style >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< / head >
< body >
< header >
< h1 > Daily Newspaper h1 >
header >
< nav >
< ul >
Entertainment News li >
Sports News li >
Weather News li >
ul >
< / nav >
< article >
< h2 > Entertainment News < / h2 >
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2 > Sports NEWS h2 >
This portion contains Sports NEWS p >
div >
article >
This is Daily Newspaper p >
body >
html >
This will produce the following result:

element in element in element
Consider the following example:
< ! DOCTYPE html >
< meta charset = “utf-8” >
The HTML5 Document title >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< body >
< header >
< h1> Daily Newspaper h1>
header >
< nav >
< li> Entertainment News li >
- Sports News < / li >
- Weather News li >
ul >
nav >
< article >
Entertainment News
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2> Sports NEWS h2 >
< p> This portion contains Sports NEWS p >
< /div >
< /section >
< /article >
< footer >
< p > This is Daily Newspaper p >
footer >
< /body >
html >
This will produce the following result:

Consider the following example:
EXAMPLE
< ! DOCTYPE html>
< html >
< head >
< meta charset = “utf-8” >
< title > The HTML5 Document < / title >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
script>
< style >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< / head >
< body >
< header >
< h1 > Daily Newspaper h1 >
header >
< nav >
< ul >
ul >
< / nav >
< article >
< h2 > Entertainment News < / h2 >
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2 > Sports NEWS h2 >
This portion contains Sports NEWS p >
div >
article >
This is Daily Newspaper p >
body >
html >
This will produce the following result:
element in element in element
Consider the following example:
< ! DOCTYPE html >
< meta charset = “utf-8” >
The HTML5 Document title >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< body >
< header >
< h1> Daily Newspaper h1>
header >
< nav >
< li> Entertainment News li >
- Sports News < / li >
- Weather News li >
ul >
nav >
< article >
Entertainment News
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2> Sports NEWS h2 >
< p> This portion contains Sports NEWS p >
< /div >
< /section >
< /article >
< footer >
< p > This is Daily Newspaper p >
footer >
< /body >
html >
This will produce the following result:

Consider the following example:
< ! DOCTYPE html >
< meta charset = “utf-8” >
< script src = “http://html5shiv.googlecode.com/svn/trunk/html5.js” >
body {
font-family: Helvetica;
font-size: 0.9em;
}
header, nav, section, article, footer {
border: 1px solid red;
margin: 5px;
padding: 8px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
style >
< body >
< header >
< h1> Daily Newspaper h1>
header >
< nav >
- Sports News < / li >
- Weather News li >
ul >
nav >
< article >
Entertainment News
< div class = “NEWS” >
This portion contains NEWS about movies, games, etc. p >
div >
< div class = “NEWS” >
< h2> Sports NEWS h2 >
< p> This portion contains Sports NEWS p >
< /div >
< /section >
< /article >
< footer >
< p > This is Daily Newspaper p >
footer >
< /body >
html >
This will produce the following result:
< li> Entertainment News li >