Docs executáveis de HTML: Doctype

Q: O doctype diferencia maiúsculas de minúsculas?

Não. , e significam a mesma coisa. DOCTYPE em maiúsculas com html em minúsculas é o estilo mais comum.

Q: Como saber se uma página está no modo quirks?

Abra o console do navegador e execute document.compatMode. "CSS1Compat" significa modo padrão (ou modo quirks limitado), "BackCompat" significa modo quirks.

O que é `<!DOCTYPE html>`

<!DOCTYPE html> é a declaração de doctype: a primeira linha de um arquivo HTML, antes da tag <html>. Ela diz ao navegador "este é um documento HTML moderno", e o navegador responde renderizando a página no modo padrão, seguindo as especificações atuais de HTML e CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

Essa única linha é o doctype inteiro do HTML5. Ela não tem tag de fechamento e nada mais vai dentro dela.

Regras de sintaxe

Ele vem primeiro. Só espaços em branco e comentários podem aparecer antes dele. Qualquer texto ou tag antes do doctype faz o navegador ignorá-lo.
Ele não diferencia maiúsculas de minúsculas. <!DOCTYPE html> e <!doctype html> são idênticos. Escolha um estilo e mantenha.
Ele não é um elemento. Não existe </!DOCTYPE>, e você não pode adicionar uma class nem outros atributos a ele.
A palavra depois de DOCTYPE precisa ser html. <!DOCTYPE html5> não é uma versão mais nova; o navegador trata essa página como se não tivesse um doctype válido.
Um por documento. Páginas montadas a partir de vários arquivos (templates, includes) ainda geram um único doctype no topo do HTML final.

Modo padrão e modo quirks

Os navegadores têm três modos de renderização, e o doctype escolhe um deles:

Modo	Acionado por	O que muda
Modo padrão	`<!DOCTYPE html>` e outros doctypes modernos	Tudo segue as especificações atuais
Modo quirks limitado	HTML 4.01 Transitional ou Frameset com URL, XHTML 1.0 Transitional ou Frameset	Quase padrão: só uma regra de altura de linha muda, então uma imagem sozinha numa linha (em geral numa célula de tabela) não tem espaço abaixo dela
Modo quirks	Nenhum doctype, um doctype digitado errado ou alguns antigos, como HTML 4.01 Transitional sem URL	Imita navegadores dos anos 90: alturas em porcentagem, tamanho do texto em tabelas e alturas de linha se comportam de outro jeito

O modo quirks existe para que páginas escritas antes dos padrões web continuem com a aparência que seus autores viam. Em páginas novas ele só traz problemas: um height: 100% que funciona numa página e não em outra, ou tabelas que ignoram o tamanho da fonte, são sintomas clássicos de doctype ausente.

As prévias do editor nesta página sempre renderizam no modo padrão, então apagar um doctype ali não vai mostrar o modo quirks. O verificador abaixo usa DOMParser, que aplica as mesmas regras que os navegadores usam ao carregar um arquivo. Edite o doctype na caixa de texto e o modo é atualizado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Tente apagar a linha, digitar <!DOCTYPE html5> ou colocar uma palavra antes do doctype: cada uma dessas mudanças troca o resultado para quirks.

Doctypes antigos: HTML 4.01 e XHTML

Antes do HTML5, um doctype apontava para um arquivo DTD com um identificador público longo. Você ainda encontra esses doctypes no topo de sites mais antigos:

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

<!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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Os navegadores nunca baixaram esses arquivos DTD. Eles só liam o identificador para escolher um modo: HTML 4.01 Strict e XHTML 1.0 Strict dão modo padrão, as versões Transitional dão modo quirks limitado e HTML 4.01 Transitional sem a URL dá modo quirks completo. Cole um deles no verificador acima para testar; repare que compatMode informa o modo quirks limitado como CSS1Compat, o mesmo valor do modo padrão, então só o modo quirks completo aparece como BackCompat.

Trocar um doctype antigo por <!DOCTYPE html> é seguro em páginas que já estão no modo padrão. Uma página que estava no modo quirks pode mudar um pouco (em geral alturas e espaços abaixo de imagens), então revise-a depois da troca.

O doctype no DOM

O doctype vira um nó DocumentType, separado do elemento <html>. Scripts o leem por document.doctype, e document.compatMode informa o modo em que a página ficou:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode é o jeito mais rápido de verificar qualquer site no ar: abra o console do navegador e digite. "CSS1Compat" significa modo padrão (ou quirks limitado), "BackCompat" significa modo quirks.

Um modelo inicial completo de HTML5

O doctype é uma parte do documento mínimo com que toda página deve começar. Cada linha abaixo tem uma função:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

O atributo lang e a tag meta viewport têm cada um a sua própria página.

Erros comuns

Algo antes do doctype. Um caractere solto, um echo de depuração de um script no servidor ou uma tag HTML acima de <!DOCTYPE html> coloca a página inteira no modo quirks. Comentários e linhas em branco não têm problema.
Inventar uma versão. <!DOCTYPE html5> ou <!DOCTYPE HTML 5> não são válidos e acionam o modo quirks. O doctype do HTML5 é só <!DOCTYPE html>.
Fechar o doctype. <!DOCTYPE html></!DOCTYPE> não é HTML válido. A declaração não tem tag de fechamento.
Deixá-lo de fora em arquivos de teste pequenos. Bugs de layout que você persegue num arquivo de rascunho sem doctype podem não existir na página real, e o contrário também.
Manter um doctype Transitional antigo. Ele coloca a página no modo quirks limitado sem nenhum benefício. Troque por <!DOCTYPE html>.

Perguntas frequentes

O que <!DOCTYPE html> faz?

Ele informa ao navegador que a página é um documento HTML moderno, e por isso ela é renderizada no modo padrão. Sem ele, os navegadores caem no modo quirks, que imita bugs dos navegadores do fim dos anos 90 e muda o cálculo de alguns layouts e alturas.

O <!DOCTYPE html> é obrigatório?

A página carrega sem ele, mas o padrão HTML exige o doctype e os navegadores renderizam a página no modo quirks. Coloque sempre <!DOCTYPE html> na primeira linha.

O doctype diferencia maiúsculas de minúsculas?

Não. <!DOCTYPE html>, <!doctype html> e <!DocType HTML> significam a mesma coisa. DOCTYPE em maiúsculas com html em minúsculas é o estilo mais comum.

DOCTYPE é uma tag HTML?

Não. É uma declaração, não um elemento: não tem tag de fechamento, não aceita atributos e não aparece em document.body. No DOM ele é um nó DocumentType separado, disponível como document.doctype.

Qual é o doctype do HTML5?

<!DOCTYPE html>. O HTML5 abandonou os identificadores públicos longos e as URLs do HTML 4.01 e do XHTML, e a forma curta é o único doctype de que você precisa em qualquer página nova.

Como saber se uma página está no modo quirks?

Abra o console do navegador e execute document.compatMode. "CSS1Compat" significa modo padrão (ou modo quirks limitado), "BackCompat" significa modo quirks.

Conceitos relacionados