HTML5 Migration

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

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

<!–[if lt IE 9]>
https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
<![endif]–>

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>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

Try it Yourself »

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.

Try it Yourself »

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>

Try it Yourself »

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>

Leave a Reply