Sobre este problema HTML
Quando um navegador encontra um documento, a declaração de doctype é a primeira coisa que lê para determinar qual modo de renderização usar. Existem três modos: modo quirks, modo quase padrão e modo padrão completo. O modo quase padrão foi introduzido como um passo de transição — renderiza páginas principalmente de acordo com os padrões, mas mantém alguns comportamentos legados, particularmente na forma como as imagens dentro de células de tabela são dispostas. Os doctypes que ativam este modo incluem:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Estes doctypes eram comuns durante a era XHTML e HTML 4, mas são agora considerados obsoletos. O W3C HTML Validator (Nu HTML Checker) foi concebido para documentos HTML5 e espera a declaração simples <!DOCTYPE html>.
Porque isto importa
-
Conformidade com padrões: O HTML Living Standard (mantido pelo WHATWG) especifica
<!DOCTYPE html>como o único doctype válido. Usar qualquer outra coisa significa que o seu documento não está conforme ao padrão atual. - Consistência de renderização: Embora o modo quase padrão seja próximo do modo padrão completo, as diferenças subtis — especialmente no dimensionamento vertical de imagens em células de tabela — podem levar a comportamentos de layout inesperados entre navegadores.
- Preparação para o futuro: Os doctypes legados ligam as suas páginas a especificações desatualizadas. As ferramentas modernas, linters e validadores esperam todos HTML5, e manter um doctype antigo pode mascarar outros problemas.
- Simplicidade: O doctype HTML5 é curto, fácil de memorizar e insensível a maiúsculas/minúsculas. Não há razão para usar uma declaração mais longa e complexa.
Como corrigir
Substitua o doctype legado na primeira linha do seu documento HTML por <!DOCTYPE html>. Não é necessário identificador público, identificador de sistema ou URL de DTD. Após fazer a alteração, revise a sua página para detetar qualquer mudança de layout — na maioria dos casos não haverá nenhuma, mas páginas que dependiam do comportamento subtil do modo quase padrão em torno de imagens em células de tabela podem precisar de um pequeno ajuste CSS (como definir img { display: block; } ou img { vertical-align: bottom; } nas imagens afetadas).
Exemplos
❌ Doctype legado que ativa o modo quase padrão
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
❌ Doctype HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
✅ Doctype HTML5 correto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
O doctype HTML5 é o doctype mais curto possível que ativa o modo padrão completo em todos os navegadores modernos. Funciona independentemente da capitalização (<!DOCTYPE html>, <!doctype html> ou <!Doctype Html> são todos equivalentes), embora a forma em minúsculas ou a forma convencional de maiúsculas/minúsculas mistas mostrada acima seja recomendada para consistência.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.