Summary -

In this topic, we described about the below sections -

Why migration is used?

HTML5 have n additional features and upgrades to HTML/HTML4 features. HTML5 includes all the components that appear in the HTML4 and XHTML. It includes the redefinition of the current mark-up elements.

The easiest and very ordinary example of the redefinition is – Earlier up to html4,the DIVelement contains the id attribute that have the assigned values like header, article, menu, content and footer. The HTML5 redefines these assigned values as an element and those are -<header>, <article>, <nav>, <section> and <footer>.

What is migration?

Migration describes about how to migrate from HTML4 to HTML5 page, without damaging any structure or content. In general terms, migration is the procedure of shifting from one operating system to another operating system. i.e., in most of the instances, the migration is considered as a better one.

Migration can include updating both hardware and software. The migration method involves getting confident with the new environment's features that are manipulated, old settings do not require shifting and existing applications continue to work as before migration.

Companies can organize small-scale migration projects that include a single system or take on big-scale migration projects that include several systems, a remodelled network or new applications. As described above, HTML5 migrates the elements from HTML4 and some of the elements specified below -

In HTML4 In HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>

Typical html4 page

Example -

Below example describes how the simple HTML example coded using HTML4 version.
<!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>
			div#header, div#footer { padding: 2px 10px; color: white;   
			border: 1px solid grey; } 
			div#content { margin: 5px; padding: 2px 10px;   
			background-color: lightgrey; } 
			div.article { margin: 5px; padding: 2px 10px;   
			background-color: white; }
		</style> 
	</head> 
	<body> 
		<div id="header">    
			<h1>header</h1> 
		</div> 
		<div id="content">
			<div class="article">     
				<h3>Article header</h3> 
				<p>Article Content </p>      
			</div> 
		</div> 
		<div id="footer">    
			<p>@footer</p> 
		</div> 
	</body> 
</html>

Output -

Article header

Article Content


Changes from HTML4 to HTML5

Below table describes how the coding has been changed for HTML4 to HTML5 -

Element HTML4 HTML5
Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html>
Encoding <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta charset="utf-8">

Example -

The above example can look like below after Doctype and Encoding migrated.
<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="utf-8"><title>HTML5</title>
		<style> 
			div#header, div#footer {   
			padding: 2px 9px; color: white; border: 1px solid grey;}
			div#content { margin: 6px; padding: 2px 10px;  
			background-color: lightgrey; } 
			div.article { margin: 5px; padding: 2px 10px; 
			background-color: white; } 
		</style> 
	</head> 
	<body> 
		<div id="header"> 
			<h1>header</h1> 
		</div> 
		<div id="content">
			<div class="article">
				<h3>Article header</h3>
				<p>Article Content </p>
			</div>
		</div> 
		<div id="footer">    
			<p>@footer</p> 
		</div> 
	</body> 
</html>

Output-

Article Header

Article Content


Change to HTML5 semantic elements

We will discuss how the HTML5 webpage look like after using semantics in the place of regular DIV with ids…

Let us take the above example to discuss the same -

In the above example, after HTML4 to HTML5 conversion, CSS contains classes and ids for designing the elements like shown below - 

body{font-family: calibary,sans-serif; font-size:0.8em;} 
div#header,div#footer{padding:9px;color:white;background-color:black;} 
div#content{margin:6px; padding:9px;background-color:grey;} 
div.article{margin:6px; padding:9px;background-color:white;}

change with the same CSS styles for the html5 semantics - 

body {font-family: calibri,sans-serif; font-size: 0.11em;} 
header, footer {padding: 2px 9px; color:white; background-color:black;} 
section {margin: 6px; padding: 2px 10px background-color: pink;} 
article {margin: 6px; padding: 2px 10px background-color: white;}

Now all the CSS properties coded for semantic elements.

Let us see how it look like after the semantics added to the HTML4 version example below –

Example -

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="utf-8"> 
		<title>HTML5 Semantics</title> 
		<style>  
			header,footer {padding: 2px 9px; color: white; 
			border: 1px solid grey; } 
			section {margin: 5px; padding: 2px 10px;
			background-color: lightgrey; } 
			article {margin: 5px; padding: 2px 9px; 
			background-color: white;} 
		</style>
	</head> 
	<body> 
		<header>    
			<h1>header</h1> 
		</header> 
		<section>  
			<article>  
				<h3>Article header</h3>
				<p>Article Content </p>
			</article>
		</section> 
		<footer>    
			<p>footer</p> 
		</footer> 
	</body> 
</html>

Output -

header

Article header

Article Content

footer


Add the html5shiv

iE8 and earlier version of internet explorer, does not allow the styling the unknown elements (For ex - semantic elements).Html5shiv is used to select the elements in legacy internet explorer and provides basic html5 elements to internet explorer prior to version 9.

Example-

Below example describes how html5shiv is used - 

<!DOCTYPE html> 
<html lang="en">
	<head> 
		<meta charset="utf-8"> 
		<title>HTML5</title> 
		<!--[if lt IE 9]> 
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
		<![endif]--> 
		<style> 
			header, footer {padding: 2px 9px; color: white; 
			border: 1px solid grey;} 
			section {margin: 5px; padding: 2px 10px; 
			background-color: lightgrey; } 
			article {margin: 5px; padding: 2px 11px; 
			background-color: white;} 
		</style> 
	</head> 
	<body> 
		<header>    
			<h1>header</h1>
		</header> 
		<section> 
			<article> 
				<h3>Article header</h3>
				<p>Article Content </p>
			</article>
		</section>
		<footer>
			<p>footer</p> 
		</footer>
	</body>
</html>

Output: -

header

Article header

Article Content

footer


<article><select> and<div> difference

There is a lot of difference between <article><select> and <div> in the HTML5 standard. In the HTML5 <article> element specifies to block of linked items and <section> element specifies complete, self-contained block of linked items. <div> element specifies a block of children elements.

In the above example,we have used <section> as a container for related <article>.However,we can use <article> as a container for articles as well. Below are the examples to differentiate <article>, <div> and <select> -

<article> in <article>

In HTML5, we can write the <article> in article> can be explained in the following example

Example -

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<title>HTML5</title> 
		<meta charset="utf-8"> 
		<style> 
			header, nav, section, article, footer 
			{border: 1px solid grey; margin: 5px; padding: 2px 8px;}
		</style> 
	</head> 
	<body> 
		<header>    
			<h1>header</h1> 
		</header> 
		<section> 
			<article>
				<h2>Main Article Header</h2> 
				<p> Main Article1 Content </p> 
				<article>
					<h3>Nested Article1 header</h3>
					<p> Nested Article1 Content </p>
				</article>
			</article> 
		</section> 
		<footer>    
			<p>footer</p> 
		</footer> 
	</body> 
</html>

Output -

header

Main Article Header

Main Article1 Content

Nested Article1 header

Nested Article1 Content

footer


<div> in <article>

In HTML5, we can write the <div> in <article> can be explained the following example -

Example -

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<title>HTML5</title> 
		<meta charset="utf-8"> 
		<style> 
			header, section, article, footer, div.content { 
				border: 1px solid grey; margin: 5px; padding: 2px 8px;}
		</style>
	</head> 
	<body> 
		<header>    
			<h1>header</h1> 
		</header> 
		<article>  
			<h2>Main Article Header</h2>
			<p> Main Article1 Content </p>
			<div class="content">
				<h3>DIV header</h3>
				<p>  DIV Content </p>
			</div> 
		</article> 
		<footer>    
			<p>footer</p>
		</footer>
	</body> 
</html>

Output -

header

Main Article Header

Main Article1 Content

DIV header

DIV Content

footer


<div> in <section> in <article>

In HTML5, we can write the <div> in <section> in <article> can be explained in the following example -

Example-

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<title>HTML5</title> 
		<meta charset="utf-8">
		<style> 
			header, section, article, footer, div.content {   
				border: 1px solid grey; margin: 5px; padding: 2px 8px;} 
		</style> 
	</head> 
	<body> 
		<header>    
			<h1>header</h1> 
		</header> 
		<article>
			<h2>Main Article Header</h2>
			<p> Main Article Content </p>
			<section>
				<h3>Section Header </h3>
				<p>Section Content </p>
				<div class="content">
					<h3>DIV header</h3>
					<p>DIV Content </p>
				</div> 
			</section> 
		</article> 
		<footer>    
			<p>footer</p>
		</footer> 
	</body> 
</html>

Output -

header

Main Article Header

Main Article Content

Section Header

Section Content

DIV header

DIV Content

footer