W3docs
pt
Entrar

Migração para HTML5

Nesta página, encontre informações sobre HTML5, veja diferenças entre HTML4 e HTML5 e aprenda a migrar do HTML4 para o HTML5 passo a passo.

Migrar do HTML4 para o HTML5 significa substituir a antiga declaração de doctype e as declarações de codificação pelas equivalentes mais curtas do HTML5, trocar contêineres genéricos <div> por elementos semânticos e remover tags e atributos apresentacionais que o HTML5 não suporta mais. Esta página percorre o processo passo a passo e termina com um resumo que pode ser usado como checklist.

Dica

Os passos descritos abaixo também podem ser aplicados na migração de XHTML para HTML5.

Ao migrar do XHTML, lembre-se de remover o atributo xmlns="http://www.w3.org/1999/xhtml" da tag <html>.

Passo 1: Alterando o Doctype

Alteramos o doctype do HTML4 para o doctype do HTML5.

HTML4

Doctype legado do HTML4

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

HTML5

Migração para HTML5

<!DOCTYPE html>

Passo 2: Alterando a Codificação

Aqui, alteramos as informações de codificação do HTML4 para a codificação do HTML5.

HTML4

Declaração de codificação legada do HTML4

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

HTML5

Migração para HTML5

<meta charset="utf-8">

Além disso, o HTML5 permite omitir o atributo type das tags <script> e <style>, pois o padrão é text/javascript e text/css, respectivamente.

Passo 3: Adicionando o HTML5Shiv

Todos os navegadores modernos suportam os novos elementos semânticos do HTML5. Além disso, é possível "ensinar" navegadores mais antigos a lidar com "elementos desconhecidos". O HTML5Shiv é usado para habilitar a estilização de elementos HTML5 nesses navegadores. Observe que esse script é praticamente obsoleto para o desenvolvimento web moderno, pois todos os navegadores atuais suportam os elementos semânticos do HTML5 nativamente.

Migração para HTML5 - HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Passo 4: Mudando para Elementos Semânticos do HTML5

No HTML4, costumávamos usar elementos genéricos <div> com atributos id e class para descrever a estrutura. O HTML5 introduz elementos semânticos que podem substituir muitos desses contêineres genéricos, dando aos navegadores, mecanismos de busca e tecnologias assistivas uma visão mais clara da página. IDs e classes não ditam semântica automaticamente, mas aqui estão as substituições estruturais mais comuns:

Contêiner HTML4Elemento semântico HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

O elemento <aside> merece destaque: ele marca conteúdo que está tangencialmente relacionado ao conteúdo ao redor, como uma barra lateral, uma citação destacada ou um bloco de links relacionados. Ele não tem equivalente direto no HTML4, portanto, geralmente é introduzido durante a migração para substituir um <div class="sidebar"> ou contêiner semelhante.

Primeiro, veja um exemplo onde elementos HTML4 são usados.

Exemplo de elementos HTML4:

Exemplo em HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. 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">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <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; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Experimente Você Mesmo »

Agora, veja a migração dos elementos HTML4 para os elementos semânticos do HTML5.

Exemplo de elementos semânticos do HTML5:

A versão migrada abaixo remove o script HTML5Shiv, pois todos os navegadores ainda em uso compreendem os elementos semânticos nativamente. Adicione o shiv de volta apenas se precisar oferecer suporte ao Internet Explorer 8 ou anterior.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Experimente Você Mesmo »

Passo 5: Removendo Elementos e Atributos Obsoletos do HTML4

A migração não se resume a substituir contêineres estruturais <div>. O HTML5 também removeu um grupo de tags e atributos apresentacionais cujo papel agora é desempenhado pelo CSS. Mantê-los no código mistura marcação com estilização e pode produzir resultados inesperados em navegadores modernos, portanto é melhor removê-los como parte da migração.

Elementos comuns a remover e suas substituições em CSS:

Elemento obsoletoO que fazer em vez disso
<font>Defina font-family, font-size e color no CSS
<center>Use text-align: center ou um layout flex/grid
<big>, <tt>, <strike>Use font-size, uma font-family monoespaçada ou text-decoration: line-through
<frame>, <frameset>, <noframes>Reestruture a página; use <iframe> apenas onde um documento incorporado é realmente necessário

Atributos comuns a remover e suas substituições em CSS:

Atributo obsoletoO que fazer em vez disso
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (em tabelas/células de layout)CSS width / height
border (apresentacional)CSS border
cellpadding, cellspacingpadding e border-spacing

Por exemplo, esta marcação HTML4:

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

torna-se isso em HTML5, com toda a apresentação movida para CSS:

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

A Diferença Entre os Elementos <section>, <article> e <div>

No HTML5, existem algumas diferenças entre os elementos <section>, <article> e <div>. Em particular:

  • <section> agrupa conteúdo tematicamente relacionado, geralmente com um título.
  • <article> representa conteúdo independente que pode ser distribuído ou reutilizado de forma autônoma.
  • <div> é um contêiner genérico sem significado semântico, usado puramente para estilização ou scripting.

Exemplo das tags <section>, <article> e <div>:

Exemplo das tags <section>, <article> e <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>
          Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
        </p>
      </article>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Experimente Você Mesmo »

Resumo da Migração

Use estes passos como checklist ao mover uma página do HTML4 para o HTML5:

  1. Substitua o longo doctype do HTML4 por <!DOCTYPE html>.
  2. Substitua a meta tag http-equiv de tipo de conteúdo pelo curto <meta charset="utf-8">.
  3. Adicione o HTML5Shiv apenas se ainda precisar oferecer suporte ao Internet Explorer 8 ou anterior; caso contrário, pule esta etapa.
  4. Substitua contêineres estruturais <div> por elementos semânticos como <header>, <nav>, <main>, <article>, <aside> e <footer>.
  5. Remova elementos e atributos apresentacionais obsoletos (<font>, <center>, align, <frameset> e similares) e mova a estilização para o CSS.

Prática

Prática
Selecione todas as opções aplicáveis. Quais dos itens a seguir são novos elementos introduzidos no HTML5?
Selecione todas as opções aplicáveis. Quais dos itens a seguir são novos elementos introduzidos no HTML5?
Was this page helpful?