Migração HTML5

Migração do HTML4 para o HTML5

Este capítulo explica como migrar de uma página HTML4 típica para uma página HTML5 típica.

Este capítulo demonstra como converter uma página HTML4 existente em uma página HTML5, sem danificar o conteúdo original e a estrutura.

Notas:Você pode usar as mesmas técnicas para migrar do HTML4 e do XHTML para o HTML5.

HTML4 típico HTML5 típico
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Página HTML4 típica

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>Notícias</li>
    <li>Esportes</li>
    <li>Tempo</li>
  </ul>
</div>
<div id="content">
<h2>Seção de Notícias</h2>
<div id="post">
  <h2>Artigo de Notícias</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>Artigo de Notícias</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>© 2014 Monday Times. Todos os direitos reservados.</p>
</div>
</body>
</html>

Experimente Praticamente

para Doctype HTML5

Modificar tipo de documento, de HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Modificar doctype para HTML5:

<!DOCTYPE html>

Experimente Praticamente

para codificação HTML5

Modificar informações de codificação, de HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Mudar para HTML5:

<meta charset="utf-8">

Experimente Praticamente

Adicionar shiv

Todos os navegadores modernos suportam elementos semânticos HTML5.

Além disso, você pode 'ensinar' navegadores antigos como lidar com 'elementos desconhecidos'.

Shiv adicionado para suporte do Internet Explorer:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Experimente Praticamente

Notas:Leia mais sobre o shiv no suporte de navegadores HTML5.

Adicionar CSS para elementos semânticos HTML5

Veja os 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 elementos semânticos HTML5:
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;
}

Experimente Praticamente

para HTML5 <header> e <footer>

Mude os elementos <div> com id="header" e id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Todos os direitos reservados.</p>
</div>

Modifique para elementos semânticos do HTML5 <header> e <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Todos os direitos reservados.</p>
</footer>

Experimente Praticamente

Altere para <nav> do HTML5

O elemento <div> com id="menu":

<div id="menu">
  <ul>
    <li>Notícias</li>
    <li>Sports</a></li>
    <li>Tempo</li>
  </ul>
</div>

Modifique para elementos semânticos do HTML5 <nav>:

<nav>
  <ul>
    <li>Notícias</li>
    <li>Sports</a></li>
    <li>Tempo</li>
  </ul>
</nav>

Experimente Praticamente

Altere para <section> do HTML5

O elemento <div> com id="content":

<div id="content">
.
.
.
</div>

Modifique para elementos semânticos do HTML5 <section>:

<section>
.
.
.
</section>

Experimente Praticamente

Altere para <article> do HTML5

Todos os elementos <div> com class="post":

<div class="post">
  <h2>Artigo de Notícias</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Modifique para elementos semânticos do HTML5 <article>:

<article>
  <h2>Artigo de Notícias</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Experimente Praticamente

Exclua estes estilos "não necessários":

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

Experimente Praticamente

Página típica do HTML5

Você pode excluir a tag <head>. Ela não é necessária no 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>Notícias</li>
    <li>Esportes</li>
    <li>Tempo</li>
  </ul>
</nav>
<section>
<h2>Seção de Notícias</h2>
<div id="post">
  <h2>Artigo de Notícias</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>
</div>
<div id="post">
<h2>Artigo de Notícias</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>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Todos os direitos reservados.</p>
</footer>
</body>
</html>

Experimente Praticamente

Diferenças entre <article>, <section> e <div>：

No padrão HTML5, a diferença entre <article>, <section> e <div> é pequena e confusa.

No padrão HTML5, o elemento <section> é posicionado como um bloco de elementos relacionados.

O elemento <article> é definido como um bloco autônomo completo de elementos relacionados.

O elemento <div> é definido como um bloco de subelementos.

Como entender isso?

No exemplo acima, usamos <section> como contêiner de <articles> relacionados.

Mas, também podemos usar <article> como contêiner de artigos.

A seguir, alguns exemplos diferentes：

No <article> dentro de <article>：
<article>
<h2>Cidades Famosas</h2>
<article>
<h2>Londres</h2>
<p>Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido,</p>
<p>com uma área metropolitana de mais de 13 milhões de habitantes.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris é a capital e a cidade mais populosa da França.</p>
</article>
<article>
<h2>Tóquio</h2>
<p>Tóquio é a capital do Japão, o centro da Grande Região de Tóquio,</p>
e a área metropolitana mais populosa do mundo.</p>
</article>
</article>

Experimente Praticamente

<article> dentro do <div>：</article>
<article>
<h2>Cidades Famosas</h2>
<div class="city">
<h2>Londres</h2>
<p>Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido,</p>
<p>com uma área metropolitana de mais de 13 milhões de habitantes.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris é a capital e a cidade mais populosa da França.</p>
</div>
<div class="city">
<h2>Tóquio</h2>
<p>Tóquio é a capital do Japão, o centro da Grande Região de Tóquio,</p>
e a área metropolitana mais populosa do mundo.</p>
</div>
</article>

Experimente Praticamente

<article> dentro do <section> dentro do <div>：</article>
<article>
<section>
<h2>Cidades Famosas</h2>
<div class="city">
<h2>Londres</h2>
<p>Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido,</p>
<p>com uma área metropolitana de mais de 13 milhões de habitantes.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris é a capital e a cidade mais populosa da França.</p>
</div>
<div class="city">
<h2>Tóquio</h2>
<p>Tóquio é a capital do Japão, o centro da Grande Região de Tóquio,</p>
e a área metropolitana mais populosa do mundo.</p>
</div>
</section>
<section>
<h2>Países Famosos</h2>
<div class="country">
<h2>Inglaterra</h2>
<p>Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido,</p>
<p>com uma área metropolitana de mais de 13 milhões de habitantes.</p>
</div>
<div class="country">
<h2>França</h2>
<p>Paris é a capital e a cidade mais populosa da França.</p>
</div>
<div class="country">
<h2>Japão</h2>
<p>Tóquio é a capital do Japão, o centro da Grande Região de Tóquio,</p>
e a área metropolitana mais populosa do mundo.</p>
</div>
</section>
</article>

Experimente Praticamente