HTML5 Migration
Migration from HTML4 to HTML5
This chapter is entirely about how to migrate from HTML4 to HTML5.
| 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
<!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.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;}</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 class="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>
</div>
<div class="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>
</div>
</div>
<div id="footer">
<p>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
<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.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;}</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 class="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>
</div>
<div class="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>
</div>
</div>
<div id="footer">
<p>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Change to HTML5 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>
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">
HTML5 Semantic 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;}
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;}
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;}
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>
<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>
0 comments:
Post a Comment