<!DOCTYPE html> — Frontend Classroom

<!DOCTYPE html> es la declaración que va en la primera línea de todo documento HTML moderno. No es un elemento HTML — no tiene etiqueta de cierre, no aparece en el DOM y no genera nada visible. Es una instrucción para el navegador que le dice: “lo que sigue es HTML moderno; procesalo según las especificaciones actuales”.

La palabra DOCTYPE viene de document type (tipo de documento). Nació en los años 90 con un propósito técnico muy distinto del actual: declarar contra qué DTD (Document Type Definition, una gramática formal que listaba qué etiquetas eran válidas) debía validarse el documento. Por eso los DOCTYPE antiguos eran cadenas larguísimas que apuntaban a un archivo de definición en un servidor de la W3C. HTML5 abandonó ese modelo de validación por DTD y se quedó solo con lo único que el navegador realmente necesitaba: una marca mínima al principio del archivo.

Hoy su función es una sola y muy concreta: sacar al navegador del quirks mode. No describe la versión de HTML, no se valida contra nada externo y no cambia con el tiempo — <!DOCTYPE html> es la forma definitiva y no tiene número de versión justamente para no volver a quedar obsoleta. Es la primera línea que escribís en cualquier página, casi un gesto automático, pero su ausencia puede romper el layout de maneras difíciles de diagnosticar.

Cómo funciona

Los navegadores tienen dos modos de interpretar HTML:

Standards mode (modo estándar): el navegador sigue la especificación HTML/CSS vigente. El CSS se comporta de manera predecible y los elementos se renderizan como corresponde.
Quirks mode (modo de compatibilidad): el navegador emula comportamientos de los navegadores de los años 90 — Internet Explorer 4, Netscape 4 — con reglas inconsistentes y a veces contradictorias. CSS puede calcular tamaños, márgenes y alineaciones de formas inesperadas.

La presencia de <!DOCTYPE html> activa el standards mode. Si falta, muchos navegadores activan quirks mode, y el diseño puede romperse de maneras difíciles de depurar.

<!DOCTYPE html>
<html lang="es">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Reglas de uso

Siempre va primero, en la línea 1 del archivo, sin ningún caracter antes — ni espacios, ni saltos de línea, ni el BOM de UTF-8. Un solo caracter antes del DOCTYPE puede activar quirks mode en algunos navegadores.
No lleva etiqueta de cierre. Es una declaración, no un elemento.
No distingue mayúsculas de minúsculas. <!DOCTYPE html>, <!doctype html> y <!Doctype HTML> son equivalentes. La convención moderna es usar minúsculas por consistencia con el resto del HTML.

Por qué la forma corta

En HTML4 y XHTML, el DOCTYPE era una cadena larga que apuntaba a un DTD (Document Type Definition) en un servidor externo:

<!-- HTML 4.01 Strict — legacy, no usar -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict — legacy, no usar -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Con HTML5, el DOCTYPE se simplificó a <!DOCTYPE html> — la forma mínima que activa standards mode en todos los navegadores modernos. No hay DTD que descargar, no hay versión que especificar. Es deliberadamente simple para que sea fácil de escribir bien.

Ejemplo en contexto

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi página</title>
  </head>
  <body>
    <h1>Hola, mundo.</h1>
  </body>
</html>

Notas, gotchas e interacción

Quirks mode y el box model: uno de los efectos más visibles del quirks mode es que el cálculo de width cambia. En standards mode, box-sizing: content-box es el default y width mide solo el contenido. En quirks mode, width ya incluye padding y border (similar a border-box moderno). Si tu CSS parece calcular anchos de forma errática, verificá que el DOCTYPE esté.
DevTools: en los navegadores modernos podés ver en qué modo está renderizando el documento. En Chrome DevTools, la consola muestra “Quirks Mode” si falta el DOCTYPE.
Archivos HTML sin DOCTYPE: los editores de texto que generan HTML a veces lo omiten. Si copiás un fragmento de HTML a un archivo nuevo, asegurate de agregarlo.

Vigente / legacy

<!DOCTYPE html> es la forma vigente y recomendada. Los DOCTYPE largos de HTML4 y XHTML son legacy y no deben usarse en proyectos nuevos. Los navegadores modernos los reconocen por compatibilidad, pero son más propensos a activar el modo almost standards (una variante de standards mode con algunas diferencias sutiles) en lugar del standards mode completo.