Migração do HTML4 para HTML5
Este capítulo é inteiramente sobre como migrar do HTML4 para HTML5.
Este capítulo demonstra como converter uma página HTML4 em uma página HTML5, sem destruir nada do conteúdo ou estrutura original.
Você pode migrar do XHTML para HTML5, usando a mesma receita.
| HTML4 típica | HTML5 típica |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <article> |
| <div id="footer"> | <footer> |
Uma típica HTML4 Página
Exemplo
<!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 solid 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>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
</div>
<div id="footer">
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html> Tente você mesmo " Mudar para HTML5 Doctype
Alterar o tipo de documento, desde o doctype HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">à doctype HTML5:
Mudar para HTML5 Encoding
Altere as informações de codificação, de HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">para HTML5:
Adicionar O Shiv
HTML5 elementos semânticos são suportados em todos os navegadores modernos.
Além disso, você pode "teach" os navegadores mais antigos como lidar com "unknown elements" .
Adicionar the shiv para suporte Internet Explorer:
Exemplo
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> Tente você mesmo " Leia sobre the shiv no suporte do navegador HTML5 .
Adicionar CSS para HTML5 Semântica Elements
Olhe para os seus estilos CSS existentes:
div#header,div#footer,div#content,div#post {
border:1px solid 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;
}Duplicar com estilos CSS iguais para HTML5 elementos semânticos:
Exemplo
header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
} Tente você mesmo " Mudar para HTML5 <header> e <footer>
Alterar os <div> elementos com id="header" e id="footer" :
<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 w3ii. All rights reserved.</p>
</div>para HTML5 semânticas <header> e <footer> elementos:
Exemplo
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer> Tente você mesmo " Mude para HTML5 <nav>
Altere o <div> elemento com id="menu" :
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>a um elemento HTML5 semântica <nav>:
Mude para HTML5 <section>
Altere o <div> elemento com id="content" :
<div id="content">
.
.
.
</div>a um elemento <section> semântica HTML5:
Mude para HTML5 <article>
Mudar tudo <div> elemento com class="post" :
<div class="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>para HTML5 semânticas <article> elementos:
Exemplo
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article> Tente você mesmo " Remova os "no longer needed" <style> elementos:
Exemplo
div#header,div#footer,div#content,div#post {
border:1px solid 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;
} Tente você mesmo " Uma típica HTML5 Página
Finalmente, você pode remover as <head> tags. Eles não são necessários em HTML5:
Exemplo
<!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 {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-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>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
</section>
<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html> Tente você mesmo " A diferença entre o <article> <section> e <div>
Há uma confusão (lack of) diferença no padrão HTML5, entre <article> <section> e <div> .
No padrão HTML5, o <section> elemento é definido como um bloco de elementos relacionados.
O <article> elemento é definido como um bloco completo, auto-suficiente de elementos relacionados.
O <div> elemento é definido como um bloco de elementos filhos.
Como interpretar isso?
No exemplo acima, usamos <section> como um recipiente para relacionados <articles> .
Mas, poderíamos ter usado <article> como um recipiente para artigos também.
Aqui estão alguns exemplos diferentes:
<article> em <article> :
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>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.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article> Tente você mesmo " <div> em <article> :
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>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.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</article> Tente você mesmo " <div> em <section> em <article> :
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>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.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>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.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article> Tente você mesmo "