Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Neste tutorial, vamos explorar as diferenças entre o HTML antigo (HTML 4.01) e atual HTML5, analisando as mudanças nas tags e atributos, e como essas melhorias tornam a web mais eficiente, acessível e moderna. Vamos começar com um exemplo de código de ambas as versões e entender como a estrutura foi aprimorada.
Código HTML Antigo (HTML4.01) vs Código Novo (HTML5)
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<meta name="descriptiion" content="Description 156 Caracteres">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" title="Style" href="style.css" >
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" >
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="header">
<div class="logo">
<a title="Home" href="#">
<h1 class="hzero">
Titulo
</h1>
<!-- Fim Logomarca(Texto) -->
<img src="#" title="Titulo da Logomarca" alt="Titulo da Logomarca" />
<!-- Fim Logomarca(Imagem) -->
</a>
<!-- Fim Logomarca(Imagem) -->
</div>
<!-- Fim Logomarca -->
<div class="nav">
<ul class="menu">
<li class="#"><a title="Titulo" target="_blank" href="">Item 1</a></li>
<li class="#"><a title="Titulo" target="_blank" href="">Item 2</a></li>
<li class="#"><a title="Titulo" target="_blank" href="">Item 3</a></li>
<li class="#"><a title="Titulo" target="_blank" href="">Item 4</a></li>
</ul>
<!-- Fim Menu(ul) -->
</div>
<!-- Fim Menu(nav) -->
</div>
<!-- Fim Header(Cabeçalho) -->
<div id="main">
<div class="artigo">
<p>Texto Artigo</p>
</div>
<div class="artigo">
<p>Texto Artigo</p>
</div>
</div>
<!-- Fim Main(Conteúdo) -->
<div id="footer">
<p>© 2025 - Todos os direitos reservados.</p>
<!-- Rodapé -->
</div>
<!-- Fim Footer(Rodapé) -->
<script type="text/javascript" src="jquery.js"></script>
<!-- Scripts -->
</body>
</html>HTML5
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="description" content="Description 156 Caracteres">
<meta name="robots" content="index, follow">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
</head>
<body>
<header class="header">
<h1 class="logo">
<a title="Titulo" href="#">
<span class="hzero">Titulo</span>
<!-- Fim Logomarca(Texto) -->
<img src="#" title="Titulo Logomarca" alt="Titulo Logomarca">
<!-- Fim Logomarca(Imagem) -->
</a>
</h1>
<!-- Fim Logomarca -->
<nav class="nav">
<ul class="menu">
<li><a title="Titulo" target="_blank" href="#">Item 1</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 2</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 3</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 5</a></li>
</ul>
<!-- Fim Menu(ul) -->
</nav>
<!-- Fim Menu(nav) -->
</header>
<!-- Fim Header(Cabeçalho) -->
<main class="main">
<section>
<article>
<h1>Titulo Artigo</h1>
<p>Texto Artigo</p>
</article>
<!-- Fim Article -->
</section>
<!-- Fim Section -->
<section>
<article>
<h1>Titulo Artigo</h1>
<p>Texto Artigo</p>
</article>
<!-- Fim Article -->
</section>
<!-- Fim Section -->
</main>
<!-- Fim Main(Conteúdo) -->
<footer class="footer">
<section>
<article>
<h1>Titulo Artigo</h1>
<p>Texto Artigo</p>
</article>
<!-- Fim Article -->
</section>
<!-- Fim Section -->
<p>© 2025 - Rodapé</p>
<!-- Rodapé -->
</footer>
<!-- Fim Footer(Rodapé) -->
<script src="jquery.js" defer></script>
<!-- Scripts -->
</body>
</html>As Principais Diferenças entre HTML4 e HTML5
O HTML5 representa uma grande evolução em relação ao HTML4, trazendo novas funcionalidades, simplificações e melhorias que ajudam tanto no desenvolvimento quanto na experiência do usuário. Muitas das mudanças buscam aumentar a Semântica do Código e melhorar a acessibilidade e a performance de páginas web.
- Declaração DOCTYPE: Em HTML4, a declaração do tipo de documento é mais complexa e inclui uma referência à DTD (Document Type Definition), enquanto no HTML5 ela foi simplificada para
<!DOCTYPE html>, sem a necessidade de especificar uma DTD.
- Estrutura Semântica: HTML5 introduziu novos elementos semânticos como
<header>,<footer>,<nav>,<main>,<section>e<article>, que tornam o código mais organizado e compreensível. Em HTML4, usávamos<div>para estruturar a página.
- Elementos Meta: Em HTML5, a declaração de codificação de caracteres é feita de maneira simplificada com
<meta charset="UTF-8">, enquanto no HTML4 usávamos um meta mais detalhado comhttp-equiv.
- Links e Scripts: Em HTML4, era comum adicionar atributos extras como
type="text/css"para arquivos CSS etype="text/javascript"para scripts, algo que foi eliminado no HTML5, já que os navegadores assumem o tipo de mídia corretamente.
- Novos Elementos: HTML5 introduziu novos elementos como
<video>,<audio>,<canvas>, e<section>, que permitem a inclusão de multimídia e gráficos diretamente na página sem precisar de plugins externos.
Agora, vou comparar os dois códigos lado a lado para entender as diferenças em detalhes.
DOCTYPE e Declaração do HTML <!DOCTYPE html></html>
<!DOCTYPE html></html>HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">vs
HTML5
<!DOCTYPE html>
<html lang="pt-br">
DOCTYPE: A declaração DOCTYPE em HTML4 é bastante extensa e inclui uma referência a um “Public Identifier” (ID Público), especificando que o código está seguindo a versão 4.01 do HTML, com a variante Transitional (que permite o uso de tags antigas). Já no HTML5, a declaração DOCTYPE foi simplificada para
<!DOCTYPE html>, refletindo uma versão mais limpa e moderna da linguagem.
Elemento
<html>: A declaração do atributoxmlns="http://www.w3.org/1999/xhtml"é necessária para especificar que o documento está usando XHTML, um subconjunto do XML. Em HTML5, essa declaração não é mais necessária. Além disso, o atributoxml:langtambém é removido, deixando apenaslang="pt-br".
Elemento <head></head>
<head></head>HTML4.01
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<meta name="descriptiion" content="Description 156 Caracteres">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" title="Style" href="style.css" >
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" >
<script type="text/javascript" src="jquery.js"></script>
</head>
<!-- Fim Head -->vs
HTML5
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="description" content="Description 156 Caracteres">
<meta name="robots" content="index, follow">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
</head>
<!-- Fim Head -->Declaração de codificação de caracteres: Em HTML4, a codificação do documento era especificada com
meta http-equiv="Content-Type". Em HTML5, isso foi simplificado para<meta charset="UTF-8">, tornando a sintaxe mais direta.
Favicon: Em HTML4, o link para o favicon era feito com
rel="shortcut icon", enquanto no HTML5 utiliza-se apenasrel="icon", uma forma mais simples e direta.
Link para o CSS: No HTML4, o atributo
type="text/css"é usado, mas em HTML5 esse atributo foi removido, já que é entendido que um link derel="stylesheet"é, por padrão, um arquivo CSS.
Script: Em HTML5, a inclusão de scripts se torna mais flexível, e a maneira mais comum é usar o atributo
<script src="jquery.js"></script>, que também é mais limpo. O entendimento é o mesmo do CSS uma vez que existesrc="jquery.js"é, por padrão, um arquivo JS e normalmente colocamos os scripts no final do arquvio antes do fechamento da tag </body>.
Elemento <header> </header>
HTML4.01
<body>
<div id="header">
<div class="logo">
<a title="Titulo" href="#">
<h1 class="hzero">Titulo</h1>
<!-- Fim Logomarca(Texto) -->
<img src="#" title="Titulo Logomarca" alt="Titulo Logomarca" />
<!-- Fim Logomarca(Imagem) -->
</a>
</div>
<!-- Fim Logomarca -->
<div class="nav">
<ul class="menu">
<li><a title="Titulo" target="_blank" href="#">Item 1</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 2</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 3</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 4</a></li>
</ul>
<!-- Fim Menu(ul) -->
</div>
<!-- Fim Menu(nav) -->
</div>
<!-- Fim Header(Cabeçalho) -->
</body>
<!-- Fim Body -->vs
HTML5
<body>
<header class="header">
<h1 class="logo">
<a title="Titulo" href="#">
<span class="hzero">Titulo</span>
<!-- Fim Logomarca(Texto) -->
<img src="#" title="Titulo Logomarca" alt="Titulo Logomarca" />
<!-- Fim Logomarca(Imagem) -->
</a>
</h1>
<!-- Fim Logomarca -->
<nav class="nav">
<ul class="menu">
<li><a title="Titulo" target="_blank" href="#">Item 1</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 2</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 3</a></li>
<li><a title="Titulo" target="_blank" href="#">Item 5</a></li>
</ul>
<!-- Fim Menu(ul) -->
</nav>
<!-- Fim Menu(nav) -->
</header>
<!-- Fim Header(Cabeçalho) -->
</body>
<!-- Fim Body -->Estrutura do Header (Logo e Menu): HTML4: Utiliza
<div>para agrupar o logo e o menu, sem uma semântica clara para essas seções, dificultando a compreensão do código e a acessibilidade. O HTML5, Introduz as tags semânticas<header>e<nav>, que tornam o código mais claro e estruturado, facilitando a compreensão da intenção do código e melhorando a acessibilidade.
Logo: O HTML4 é frequentemente implementado dentro de uma
<div class="logo">, com a utilização de uma tag<h1>ou<img>, sem uma semântica clara ou seja explícita. Já no HTML5 é implementado uma tag<header>e utiliza<span>para incluir um texto escondido (class=”hzero”) com a imagem, evitando a redundância de títulos, e mantendo a estrutura limpa e semântica.
Menu de Navegação: No HTML4 menu de navegação está dentro de uma
<div class="nav">, com uma lista não ordenada<ul>e sem a semântica explícita para navegação. No HTML5 é implementado dentro de uma tag<nav>, que indica claramente que aquela seção se destina à navegação, melhorando a organização semântica e acessibilidade do documento.
Elemento <main> </main>
HTML4.01
<body>
<div id="main">
<div class="artigo">
<p>Texto Artigo</p>
</div>
<div class="artigo">
<p>Texto Artigo</p>
</div>
</div>
<!-- Fim Main(Conteúdo) -->
</body>
<!-- Fim Body -->vs
HTML5
<body>
<main class="main">
<section>
<article>
<h1>Titulo Artigo</h1>
<p>Texto Artigo</p>
</article>
<!-- Fim Article -->
</section>
<!-- Fim Section -->
<section>
<article>
<h1>Titulo Artigo</h1>
<p>Texto Artigo</p>
</article>
<!-- Fim Article -->
</section>
<!-- Fim Section -->
</main>
<!-- Fim Main(Conteúdo) -->
</body>
<!-- Fim Body -->Estrutura do Main (Conteúdo Principal): HTML4 Utiliza uma
<div>com id=”main” para agrupar o conteúdo principal da página, sem semântica explícita para indicar a área principal do conteúdo. Por outro lado o HTML5 utiliza a tag semântica<main>, que define claramente a área principal do conteúdo da página, facilitando a acessibilidade e organização.
Seções Dentro do Main: No HTML4 não há um agrupamento semântico dentro do conteúdo principal separando as seções da página. O conteúdo é agrupado apenas em
<div>. A tag<section>no HTML5 é utilizada para organizar cada artigo dentro do conteúdo principal, ajudando a separar as seções de conteúdo de forma semântica.
Artigos: HTML4 o conteúdo dos artigos é agrupado dentro de
<div class="artigo">, sem uma marcação semântica específica. No HTML5 usamos a tag semântica<article>para definir claramente cada unidade de conteúdo independente assim como um <h1> para o títul desse artigo e <p> para o parágrafo.
Elemento <footer> </footer>
HTML4.01
<body>
<div id="footer">
<p>© 2025 - Todos os direitos reservados.</p>
<!-- Rodapé -->
</div>
<!-- Fim Footer(Rodapé) -->
<script type="text/javascript" src="jquery.js"></script>
<!-- Scripts -->
</body>
<!-- Fim Body -->vs
HTML5
<body>
<footer class="footer">
<section>
<article>
<h1>Titulo Artigo</h1>
<p>Texto Artigo</p>
</article>
<!-- Fim Article -->
</section>
<!-- Fim Section -->
<p>© 2025 - Rodapé</p>
<!-- Rodapé -->
</footer>
<!-- Fim Footer(Rodapé) -->
<script src="jquery.js" defer></script>
<!-- Scripts -->
</body>
<!-- Fim Body -->Estrutura do Footer (Rodapé) HTML4: O rodapé é simplesmente envolvido por uma
<div>com id=”footer”, sem uma marcação semântica específica para indicar que aquele conteúdo se refere ao rodapé. Aqui no HTML5 A tag semântica<footer>é utilizada, deixando claro que o conteúdo é o rodapé da página. Isso melhora a acessibilidade e torna o código mais organizado.
Artigos no Rodapé HTML4: Não há um uso explícito de artigos ou seções dentro do rodapé, o conteúdo é simplesmente agrupado dentro da
<div>. No HTML5 o rodapé agora contém uma<section>que envolve um<article>. Essa organização ajuda a estruturar melhor o conteúdo, permitindo que você adicione informações mais detalhadas ou específicas, como artigos ou links importantes no rodapé.
Scripts HTML4: requer o atributo type="text/javascript" para especificar o tipo de script, enquanto HTML5 simplifica isso, removendo o atributo type, já que JavaScript é o padrão. Ambos os exemplos incluem o script no final do corpo, mas no HTML5 há maior flexibilidade para otimizar o carregamento dos scripts utilizando atributos como defer ou async, o que não era possível no HTML4.
A transição de HTML4 para HTML5 trouxe uma série de melhorias significativas que tornam o desenvolvimento web mais eficiente, acessível e semântico.
- Semântica Melhorada: O uso de tags semânticas como
<header>,<footer>,<main>,<section>e<article>no HTML5 facilita a estruturação e organização do conteúdo, permitindo uma melhor compreensão por parte de navegadores e motores de busca, além de melhorar a acessibilidade para leitores de tela.
- Simplificação de Código: O HTML5 simplificou a sintaxe em relação ao HTML4. Por exemplo, o uso de
<meta charset="UTF-8">em vez de<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, e a remoção do atributotype="text/css"no link de CSS tornam o código mais limpo e direto.
- Maior Flexibilidade e Acessibilidade: A introdução de novas tags como
<section>e<article>no HTML5 oferece maior flexibilidade na organização do conteúdo, além de facilitar a leitura e navegação tanto para usuários quanto para mecanismos de busca.
- Foco no Design Responsivo: O HTML5 foi desenvolvido com foco em tornar a web mais adaptável a diferentes dispositivos, tornando mais fácil o desenvolvimento de sites responsivos.
- Remoção de Atributos Desnecessários: Tags como
<link rel="stylesheet">em HTML5 não exigem mais atributos comotype="text/css", simplificando o código e reduzindo redundâncias.
Em resumo, HTML5 oferece uma abordagem mais moderna, limpa e semântica para o desenvolvimento web, melhorando a estruturação do conteúdo, a acessibilidade e a compatibilidade com novas tecnologias e dispositivos. Por outro lado, HTML4 tem suas limitações, especialmente no que diz respeito à semântica e à flexibilidade. A transição para o HTML5 é uma evolução natural que traz benefícios claros para os desenvolvedores e usuários finais.
