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” > <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 >

<head >
<meta http-equiv =”Content-Type” content =”text/html; charset = utf-8″>

< title > The HTML4 Document </ title >

<style >

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:

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” >

<title> The HTML5 Document < / title >

<!– [if lt IE 9] >

<script src =”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>

</script>

<! [endif]– >

< 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>

<p > This portion contains NEWS about movies, games, etc. < /p>

</ article >

< article>

< h2> Sports NEWS </ h2>

<p > This portion contains Sports NEWS </ p>

</ article >

</ section>

<footer >

<p> This is Daily Newspaper < /p>

< /footer >

</ body >

</ html >

This will produce the same result that is as follows:

same-result-that

From the above two documents, we can conclude that:

  1. 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 >

  1. The character encoding in the HTML4 document is:

<meta http-equiv=”Content-Type” content=”text/html; charset =utf-8″ >

and the character encoding of HTML5 document is:

                  <meta charset=”utf-8″ > 

  1. 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.
  1. We used the HTML5Shiv to style the unknown elements and to support them in the older versions of internet explorer.
  1. The < menu > element in the HTML4 document is replaced by the < nav > element in the HTML5 document.

 

Difference between the < article>, <section> and <DIV> 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.




<article> element within <article> element

Consider the following example to illustrate an <article> element within an <article> 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 >

<li > Weather News </ li >

</ ul >

< / nav >

< article >

< h2 > Entertainment News < / h2 >

< article >

<p > 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 >

<p > This is Daily Newspaper < / p >

< /footer >

< / body >

< / html >

The above example will produce the following result:

article

In the above example, the article “Sports NEWS” is within the article “Entertainment NEWS”.

<DIV> element within the <article> element

Consider the following example:

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 >

<li > Weather News </ li >

</ ul >

< / nav >

< article >

< h2 > Entertainment News < / h2 >

< div class = “NEWS” >

<p > 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 >

</ article >

<footer >

<p > This is Daily Newspaper </ p >

</footer >

</ body >

</ html >

This will produce the following result:

this-will-produce-the-following-result




<div> element in <section> element in <article> element

Consider the following 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 >

<li > Weather News </ li >

</ ul >

</ nav >

< article >

<section >

<h2> Entertainment News </h2>

< div class = “NEWS” >

<p > 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:

this-is-daily-newspaper