You Are Here

HTML5 Migration

Migration in HTML5 defines how to migrate from HTML4 to HTML5. Let’s see how the migration of the HTML4 page can be done into an HTML5 page without any problem in content or structure.
The HTML5 has new features and improvements to existing features. It includes all the elements that are present in the HTML4 and XHTML. HTML5 includes the redefinition of the existing markup elements.
The redefinition of the HTML4 elements to the HTML5 is given below:
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:
Lets see the following example:

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: Arial,sans-serif;
font-size: 1em;
}
div#header, div#footer {
padding: 15px;
color: white;
background-color: #ff5722;
}
div#content {
margin: 6px;
padding: 15px;
background-color: #ff5722;
}
div.article {
margin: 6px;
padding: 15px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 6px;
}
</style>
</head>
<body>
<div id="header">
<h2> W3CodingSchools </h2>
</div>
<div id="menu">
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Bootstrap </li>
</ul>
</div>
<div id="content">
<h2> Tutorials </h2>
<div class="article">
<h2> HTML </h2>
<p> HTML is a markup language using which you can create your website. HTML stands for Hypertext Markup Language. It contains elements and the elements are represented by tags. You can create a static webpage by using HTML only. Technically HTML is not a programming language it is a markup language. </p>
</div>
<div class="article">
<h2> CSS </h2>
<p> CSS is the acronym for Cascading Style Sheets. It is widely used language on the web. Styles are set using CSS properties. For example, you can set font properties (size, colors, style etc), background color, border styles, and much more. Which describe the look and formatting of a document written in markup language. External stylesheets are stored in CSS files. </p>
</div>
<div class="article">
<h2> Bootstrap </h2>
<p> Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive and mobile-friendly websites or web applications. It also gives you the ability to create Responsive Web Designs. It is an open-source framework and free to download and use. It is the most popular front-end framework used for faster and easier to develop web applications or websites. </p>
</div>
</div>
<div id="footer">
<p> © 2019 W3CodingSchools All rights reserved. </p>
</div>
</body>
</html>
Try it
From the above example we can say that,  for the migration form HTML4 to HTML5 we have to make changes in the following fields:

Change HTML 4 Doctype to HTML 5 Doctype:

This is HTML4 doctype:

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
For the migration from HTML4 to HTML5 change it to:

Example:

<!DOCTYPE html>

Change HTML4 Encoding to HTML5 Encoding:

This is HTML4 encoding:

Example:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Change it to:

Example:

<meta charset="utf-8">

Use the HTML5 Shiv:

Use the HTML5Shiv to style the unknown elements and to support them in the older versions of internet explorer.

Example:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Change <div> elements to HTML5 Semantic Elements:

In HTML4 we used <div> element for header, footer, menu and article etc, but in HTML5 we used the semantic elements like <header>, <footer>, <article>, <nav> etc.

Example:

<!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">
<![endif]-->
<style>
body {
font-family: Arial,sans-serif;
font-size: 1em;
}
header, footer {
padding: 15px;
color: white;
background-color: #ff5722;
}
section {
margin: 6px;
padding: 15px;
background-color: #ff5722;
}
article {
margin: 6px;
padding: 15px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 6px;
}
</style>
</head>
<body>
<header>
<h2> Web Technologies </h2>
</header>
<nav>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Bootstrap </li>
</ul>
</nav>
<section>
<h2> Tutorials </h2>
<article>
<h2> HTML </h2>
<p> HTML is a markup language using which you can create your website. HTML stands for Hypertext Markup Language. It contains elements and the elements are represented by tags. You can create a static webpage by using HTML only. Technically HTML is not a programming language it is a markup language. </p>
</article>
<article>
<h2> CSS </h2>
<p> CSS is the acronym for Cascading Style Sheets. It is widely used language on the web. Styles are set using CSS properties. For example, you can set font properties (size, colors, style etc), background color, border styles, and much more. Which describe the look and formatting of a document written in markup language. External stylesheets are stored in CSS files. </p>
</article>
<article>
<h2> Bootstrap </h2>
<p> Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive and mobile-friendly websites or web applications. It also gives you the ability to create Responsive Web Designs. It is an open-source framework and free to download and use. It is the most popular front-end framework used for faster and easier to develop web applications or websites. </p>
</article>
</section>
<footer>
<p> © 2019 W3CodingSchools All rights reserved. </p>
</footer>
</body>
</html>
Try it

Difference between the <article>, <section> and <div> element:

There is difference between <article> <section> and <div> in the HTML5 standard.
To represent a generic section of the HTML document a <section> element is used. It should not be used for styling or scripting purposes only.
There is a difference between the <article> and the <section> element. The <article> element is used to specify the complete composition in a page, whereas, the <section> element is used to represent a section of a page or document.
To mark the block of the document as a group the <div> element is used. This document is then used to specify the properties of this group. The <div> element does not affect the appearance of the document.
Some different examples of < article>, <section> and <DIV> element:

<article> element within <article> element:

Example:

<article>
<h2>Highlights</h2>
<article>
<h2>Classified</h2>
<p>This section contains classified news.</p>
</article>
<article>
<h2>Sports</h2>
<p>This section contains sport news.</p>
</article>
<article>
<h2>Entertainment</h2>
<p>This section contains entertainment news.</p>
</article>
</article>
Try it

<div> element in <article> element:

Example:

<article>
<h2>Highlights</h2>
<div class="news">
<h2>Classified</h2>
<p>This section contains classified news.</p>
</div>
<div class="news">
<h2>Sports</h2>
<p>This section contains sport news.</p>
</div>
<div class="news">
<h2>Entertainment</h2>
<p>This section contains entertainment news.</p>
</div>
</article>
Try it

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

Example:

<header>
<h2> Newspaper </h2>
</header>
<nav>
<ul>
<li> Classified </li>
<li> Sports </li>
<li> Entertainment </li>
</ul>
</nav>
<article>
<section>
<h2> Highlights </h2>
<div class="news">
<h2> Classified </h2>
<p> This section contains Classified news. </p>
</div>
<div class="news">
<h2> Sports </h2>
<p> This section contains sports news. </p>
</div>
<div class="news">
<h2> Entertainment </h2>
<p> This section contains entertainment news. </p>
</div>
</section>
</article>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *