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 |
|---|---|
| <div id=”header”> | <header> |
| <div id=”menu”> | <nav> |
| <div id=”content”> | <section> |
| <div class=”article”> | <article> |
| <div id=”footer”> | <footer> |
A Typical HTML4 Page
Example
HTML4 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.
Change to HTML5 Doctype
Change the doctype:
to the HTML5 doctype:
Example
Change to HTML5 Encoding
Change the encoding information:
to HTML5 encoding:
Example
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
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
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.
The Difference Between <article> <section> and <div>
There is a confusing (lack of) difference in the HTML5 standard, between <article> <section> and <div>.
In the HTML5 standard, the <section> element is defined as a block of related elements.
The <article> element is defined as a complete, self-contained block of related elements.
The <div> element is defined as a block of children elements.
How to interpret that?
In the example above, we have used <section> as a container for related <articles>.
But, we could have used <article> as a container for articles as well.
Here are some different examples:
<article> in <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.
<div> in <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.
<div> in <section> in <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.
Famous Countries
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.
Affect of Color Property on Borders and Oulines
The color property is not just for text content, but for anything in the foreground that takes a color value. For instance, if border-color or outline-color value hasn’t been defined explicitly for the element, the color value will be used instead.
[css]
p.one {
color: #0000ff;
border: 2px solid;
}
p.two {
color: #00ff00;
outline: 2px solid;
}
[/css]
Leave A Comment