Migration from HTML4 to HTML5
This chapter is entirely about how to migrate from HTML4 to HTML5.
This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original content or structure.
You can migrate from XHTML to HTML5, using the same recipe.
Typical HTML4 | Typical HTML5 |
---|---|
|
|
A Typical HTML4 Page
Example
HTML4
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Monday Times
News Section
News Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
News Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
</div>
</body>
</html>
Try it Yourself »
Change to HTML5 Doctype
Change the doctype:
<!DOCTYPE HTML PUBLIC “-//DTD HTML 4.01 Transitional//EN”>
to the HTML5 doctype:
Example
<!DOCTYPE html>
Try it Yourself »
Change to HTML5 Encoding
Change the encoding information:
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
to HTML5 encoding:
Example
<meta charset=”utf-8″>
Try it Yourself »
Add The HTML5Shiv
The new HTML5 semantic elements are supported in all modern browsers. In addition, you can “teach” older browsers how to handle “unknown elements”.
However, IE8 and earlier, does not allow styling of unknown elements. So, the HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.
Add the HTML5Shiv:
Example
Try it Yourself »
Read more about the HTML5Shiv in HTML5 Browser Support.
Change to HTML5 Semantic Elements
The existing CSS contains id’s and classes for styling the elements:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Replace with equal CSS styles for HTML5 semantic elements:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
Finally, change the elements to HTML5 semantic elements:
Example
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
The Difference Between <article> <section> and
There is a confusing (lack of) difference in the HTML5 standard, between
and
.
In the HTML5 standard, the
element is defined as a block of related elements.
The
element is defined as a complete, self-contained block of related elements.
The
element is defined as a block of children elements.
How to interpret that?
In the example above, we have used
as a container for related .
But, we could have used
as a container for articles as well.
Here are some different examples:
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</article>
in
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
<section>
<h2>Famous Countries</h2>
England
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
France
Paris is the capital and most populous city of France.
Japan
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
</article>
Share this content
There is a confusing (lack of) difference in the HTML5 standard, between
In the HTML5 standard, the
The
The
How to interpret that?
In the example above, we have used
But, we could have used
Here are some different examples:
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</article>
in
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
<section>
<h2>Famous Countries</h2>
England
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
France
Paris is the capital and most populous city of France.
Japan
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
</article>
Share this content
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</article>
in
in
:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
<section>
<h2>Famous Countries</h2>
England
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
France
Paris is the capital and most populous city of France.
Japan
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
</article>
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
<section>
<h2>Famous Countries</h2>
England
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
France
Paris is the capital and most populous city of France.
Japan
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</section>
</article>