THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 Migration


Migration from HTML4 to HTML5

This section is altogether about how to migrate from an average HTML4 page to a run of the mill HTML5 page.

This section shows how to change over a HTML4 page into a HTML5 page, without devastating anything of the first substance or structure.

You can move to HTML5 from HTML4 or XHTML, utilizing the equivalent recipe..
Typical HTML4 Typical HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

A Typical HTML4 Page

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:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post
  {border:1px strong grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

<div id="content">
<h2>News Section</h2>

<div id="post">
  <h2>News Article</h2>
  <p>css html css html css html css css
  html css.</p>
  <p>css html css css html css html css
  html js turum.</p>
</div>

<div id="post">
  <h2>News Article</h2>
  <p>css html css html css html css
  html css.</p>
  <p>css html css html css html css
  html css.</p>
</div>

</div>

<div id="footer">
  <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>
Try it Yourself »

Change to HTML5 Doctype

Change the doctype, from the HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to the HTML5 doctype:

Example

<!DOCTYPE html>
Try it Yourself »

Change to HTML5 Encoding

Change the encoding data, from HTML4:

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

to HTML5:

Example

<meta charset="utf-8">
Try it Yourself »

Add The Shiv

HTML5 semantic components are upheld in all cutting edge browsers.

In expansion, you can "teach" more established programs how to deal with "unknown elements".

Add the shiv for Internet Explorer support:

Example

<!- - [if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]- - >
Try it Yourself »

Add CSS for HTML5 Semantic Elements

Look at your current CSS styles:

div#header,div#footer,div#content,div#post {
    border:1px strong grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    foundation color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Duplicate with equivalent CSS styles for HTML5 semantic elements:

Example

header,footer,section,article {
    border:1px strong grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
area {
    foundation color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
Try it Yourself »

Change to HTML5 <header> and <footer>

Change the <div> components with id="header" and id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>&amp;copy; 2014 welookups. All rights reserved.</p>
</div>

to HTML5 semantic <header> and <footer> elements:

Example

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>&copy; 2014 welookups. All rights reserved.</p>
</footer>
Try it Yourself »

Change to HTML5 <nav>

Change the <div> component with id="menu":

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

to a HTML5 semantic <nav> element:

Example

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
Try it Yourself »

Change to HTML5 <section>

Change the <div> component with id="content":

<div id="content">
.
.
.
</div>

to a HTML5 semantic <section> element:

Example

<section>
.
.
.
</section>
Try it Yourself »

Change to HTML5 <article>

Change all <div> component with class="post":

<div class="post">
  <h2>News Article</h2>
  <p>css html css html js phpcss html css
  html css.</p>
</div>

to HTML5 semantic <article> elements:

Example

<article>
  <h2>News Article</h2>
  <p>css html css html css html css
  html css.</p>
</article>
Try it Yourself »

Remove these "no longer needed" <style> elements:

Example

div#header,div#footer,div#content,div#post {
    border:1px strong grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    foundation color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Try it Yourself »

A Typical HTML5 Page

Finally you can evacuate the <head> labels. They are not required in HTML5:

Example

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!- - [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]- - >

<style>
body {
    text style family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px strong grey;
    margin:5px;margin-bottom:15px;padding:8px;
    foundation color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
area {
    foundation color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

<section>
<h2>News Section</h2>

<article>
  <h2>News Article</h2>
  <p>css html css html css html html css
  html css.</p>
  <p>css html css css html css html css
  html css.</p>
  <p>css html css html css html css css
  html css.</p>
</article>

<article>
<h2>News Article</h2>
  <p>css html css html css html html css
  html css.</p>
  <p>css html css css html css html css
  html css.</p>
  <p>css html css html css html css css
  html css.</p>
</article>

</section>

<footer>
  <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>
Try it Yourself »

The Difference Between <article> <section> and <div>

There is a confounding (absence of) distinction in the HTML5 standard, between <article> <section> and <div>.

In the HTML5 standard, the <section> component is characterized as a square of related elements.

The <article> component is characterized as a total, independent square of related elements.

The <div> component is characterized as a square of kids elements.

How to decipher that?

In the precedent above, we have utilized <section> as a compartment for related <articles>.

But, we could have utilized <article> as a compartment for articles as well.

Here are some extraordinary examples:

<article> in <article>:

<article>

<h2>Famous Country</h2>

<article>
<h2>India </h2>
<p>India is a tremendous South Asian nation with differing territory – from Himalayan tops to Indian Ocean coastline – and history coming to back 5 centuries. .</p>
</article>

<article>
<h2>USA</h2>
<p>The U.S. is a nation of 50 states covering an immense swath of North America, with Alaska in the northwest and Hawaii broadening the country's quality into the Pacific Ocean. Significant Atlantic Coast urban communities are New York, a worldwide account and culture focus .</p>
</article>

<article>
<h2> China</h2>
<p>China is a crowded country in East Asia whose tremendous scene includes meadow, desert, mountains, lakes, waterways and more than 14,000km of coastline. Capital Beijing blends present day design with memorable locales, for example, the Forbidden nation castle complex </p>
</article>

</article>
Try it Yourself »

<div> in <article>:

<article>

<h2>Famous Country</h2>

<div class="country">
<h2>India </h2>
<p>India is an immense South Asian nation with differing landscape – from Himalayan tops to Indian Ocean coastline – and history coming to back 5 centuries. </p>
</div>

<div class="country">
<h2>USA</h2>
<p>PThe U.S. is a nation of 50 states covering an immense swath of North America, with Alaska in the northwest and Hawaii expanding the country's essence into the Pacific Ocean. Real Atlantic Coast urban communities are New York, a worldwide money and culture focus .</p>
</div>

<div class="country">
<h2> China</h2>
<p>China is a crowded country in East Asia whose immense scene includes meadow, desert, mountains, lakes, waterways and more than 14,000km of coastline. Capital Beijing blends present day design with memorable destinations, for example, the Forbidden nation royal residence complex .</p>
</div>

</article>
Try it Yourself »

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

<article>

<section>
<h2>Famous Country</h2>

<div class="country">
<h2>India </h2>
<p>India is an immense South Asian nation with differing landscape – from Himalayan crests to Indian Ocean coastline – and history coming to back 5 centuries. </p>
</div>

<div class="country">
<h2>USA</h2>
<p>The U.S. is a nation of 50 states covering a tremendous swath of North America, with Alaska in the northwest and Hawaii expanding the country's quality into the Pacific Ocean. Significant Atlantic Coast urban communities are New York, a worldwide money and culture focus .</p>
</div>

<div class="country">
<h2> China</h2>
<p>China is a crowded country in East Asia whose huge scene incorporates field, desert, mountains, lakes, waterways and more than 14,000km of coastline. Capital Beijing blends present day design with memorable locales, for example, the Forbidden nation royal residence complex .</p>
</div>
</section>

<section>
Try it Yourself »