Error Doctype HTML5 faltante

Por qué una página necesita <!DOCTYPE html> justo al principio, y qué le hace el modo quirks del navegador al layout y al box sizing cuando falta.

El validador marca cualquier documento que no empiece con <!DOCTYPE html> (sin distinguir mayúsculas, ignorando espacios en blanco al inicio).

Por qué ocurre

El doctype es un artefacto histórico de HTML 4 y XHTML, donde apuntaba a un DTD (Document Type Definition) contra el cual el navegador podía validar. HTML5 mantiene la sintaxis puramente como una señal — una línea, sin referencia a ningún DTD — que le dice al navegador "renderiza esto en modo estándar".

Ejemplo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Título de la página</title>
  </head>
  <body>...</body>
</html>

Por qué importa

Sin un doctype (o con un doctype viejo de HTML4/XHTML), los navegadores caen en el modo quirks — un modo de renderizado heredado que reproduce errores de los navegadores de finales de los 90 por compatibilidad hacia atrás. El modo quirks cambia el dimensionamiento del box model, el layout de tablas y el manejo de unidades CSS de formas que son inconsistentes entre navegadores. El modo estándar, activado por un simple <!DOCTYPE html>, es lo que asume cualquier técnica moderna de layout (flexbox, grid, box-sizing).

Frequently asked questions

¿Qué es el modo quirks?

Un modo de renderizado heredado al que caen los navegadores cuando no hay un doctype válido, reproduciendo errores de layout de los navegadores de los 90 por compatibilidad hacia atrás. Afecta el dimensionamiento del box model y el layout de tablas de formas que difieren entre navegadores.

¿El doctype necesita atributos como en HTML 4?

No. El doctype de HTML5 es exactamente <!DOCTYPE html> y nada más — sin URL de DTD, sin espacio de nombres XML. Cualquier cosa más elaborada es un doctype viejo de HTML4/XHTML (que activa el modo quirks o quirks limitado) o es simplemente inválido.