Declaração HTML <!DOCTYPE>
Aprenda a declaração HTML <!DOCTYPE>: use <!DOCTYPE html> para ativar o Modo de Padrões, evitar bugs do Modo Quirks e iniciar documentos corretamente.
A declaração <!DOCTYPE> é a primeira linha de um documento HTML. Ela informa ao navegador qual versão de HTML a página utiliza e — mais importante nos dias de hoje — que a página deve ser renderizada seguindo os padrões da web. Não se trata de uma tag HTML; é uma instrução ao navegador.
Esta página aborda o único doctype que você deve usar, por que ele é importante (Modo de Padrões vs. Modo Quirks) e uma breve observação sobre os doctypes legados que você ainda pode encontrar em código antigo.
O Doctype que Você Deve Usar
Para todo novo documento HTML, use esta única linha, exatamente assim:
<!DOCTYPE html>Esse é o doctype completo do HTML5. Algumas regras:
- Ele deve ser a primeira coisa no documento, antes da tag
<html>e antes de qualquer outro conteúdo (inclusive antes de um comentário ou linha em branco, por precaução). - Ele não diferencia maiúsculas de minúsculas —
<!DOCTYPE html>,<!doctype html>e<!Doctype HTML>são todos válidos. O<!doctype html>em minúsculas é comum, mas a convenção acima é a mais amplamente usada. - Não há tag de fechamento.
Um documento mínimo e completo tem esta aparência:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with a line break.</p>
</body>
</html>Para aprender o que vai dentro do documento após o doctype, veja HTML Basic Tags, a tag <html> e a tag <head>.
Por Que o Doctype É Importante: Modo de Padrões vs. Modo Quirks
Quando um navegador analisa uma página, ele escolhe um de dois modos de renderização:
- Modo de Padrões — o navegador segue as especificações modernas do W3C/WHATWG. É isso que você deseja. O layout, o modelo de caixa e o CSS se comportam de forma consistente entre os navegadores.
- Modo Quirks — o navegador emula o comportamento problemático dos navegadores do final da década de 1990 (pense no Internet Explorer 5) para evitar que páginas muito antigas quebrem. Esse modo é ativado quando o doctype está ausente, malformado ou é antigo/desconhecido.
Um <!DOCTYPE html> correto é o que coloca o navegador no Modo de Padrões. Se você omiti-lo, entra no Modo Quirks, onde várias coisas mudam de formas surpreendentes:
- O modelo de caixa quebra. No Modo Quirks,
widtheheightincluem padding e bordas (o antigo modelo de caixa do IE), então uma caixa dimensionada para200pxpode renderizar maior ou menor do que o esperado. line-height,vertical-aligne o espaçamento de elementos inline se comportam de forma diferente, frequentemente produzindo espaços extras em torno de imagens e células de tabela.- Unidades CSS e porcentagens podem ser herdadas e calculadas de forma inconsistente.
Esses bugs são difíceis de diagnosticar porque seu CSS parece correto — o modo é que está errado. Adicionar o doctype é a solução, por isso todo documento moderno deve começar com ele.
document.compatMode no console: "CSS1Compat" significa Modo de Padrões, "BackCompat" significa Modo Quirks.Uma Observação sobre Doctypes Legados
Antes do HTML5, o doctype referenciava uma Definição de Tipo de Documento (DTD) — uma gramática formal que descrevia quais elementos e atributos eram válidos. Essas declarações eram longas e fáceis de errar, por exemplo, o HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">O HTML 4.01 existia nas versões Strict, Transitional e Frameset, e o XHTML 1.0 / 1.1 adicionou mais algumas variações (como "-//W3C//DTD XHTML 1.0 Strict//EN"). Você ainda pode encontrá-las em bases de código mais antigas.
A conclusão importante: o HTML5 substituiu todas elas pelo simples e curto <!DOCTYPE html>. É o doctype válido mais curto que ativa confiavelmente o Modo de Padrões, e é o único que você precisa escrever hoje.