Declaración HTML <!DOCTYPE>
Aprende la declaración HTML <!DOCTYPE>: usa <!DOCTYPE html> para activar el Modo Estándar, evitar errores del Modo Quirks e iniciar documentos correctamente.
La declaración <!DOCTYPE> es la primera línea de un documento HTML. Le indica al navegador qué versión de HTML usa la página y, lo más importante hoy en día, que la página debe renderizarse siguiendo los estándares web. No es una etiqueta HTML; es una instrucción para el navegador.
Esta página cubre el único doctype que debes usar, por qué es importante (Modo Estándar vs. Modo Quirks) y una breve nota sobre los doctypes heredados que aún puedes encontrar en código antiguo.
El Doctype Que Debes Usar
Para todo nuevo documento HTML, usa esta línea exactamente así:
<!DOCTYPE html>Ese es el doctype completo de HTML5. Algunas reglas:
- Debe ser lo primero en el documento, antes de la etiqueta
<html>y antes de cualquier otro contenido (incluso antes de un comentario o línea en blanco, por seguridad). - No distingue entre mayúsculas y minúsculas —
<!DOCTYPE html>,<!doctype html>y<!Doctype HTML>son todos válidos. La forma en minúsculas<!doctype html>es común, pero la convención anterior es la más utilizada. - No tiene etiqueta de cierre.
Un documento mínimo y completo tiene este aspecto:
<!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 qué va dentro del documento después del doctype, consulta HTML Basic Tags, la etiqueta <html> y la etiqueta <head>.
Por Qué Importa el Doctype: Modo Estándar vs. Modo Quirks
Cuando un navegador analiza una página, elige uno de dos modos de renderizado:
- Modo Estándar — el navegador sigue las especificaciones modernas de W3C/WHATWG. Esto es lo que quieres. El diseño, el modelo de caja y CSS se comportan de manera consistente en todos los navegadores.
- Modo Quirks — el navegador emula el comportamiento defectuoso de los navegadores de finales de los años 90 (como Internet Explorer 5) para que las páginas muy antiguas no se rompan. Este modo se activa cuando el doctype está ausente, mal formado o es antiguo/desconocido.
Un <!DOCTYPE html> correcto es lo que cambia el navegador al Modo Estándar. Si lo omites, entras en Modo Quirks, donde varias cosas cambian de formas inesperadas:
- El modelo de caja falla. En Modo Quirks,
widthyheightincluyen padding y bordes (el antiguo modelo de caja de IE), por lo que una caja dimensionada a200pxpuede renderizarse más ancha o más estrecha de lo esperado. line-height,vertical-aligny el espaciado de elementos en línea se comportan de manera diferente, produciendo con frecuencia espacios adicionales alrededor de imágenes y celdas de tabla.- Las unidades CSS y los porcentajes pueden heredarse y calcularse de forma inconsistente.
Estos errores son difíciles de diagnosticar porque tu CSS parece correcto — el modo es el que está mal. Añadir el doctype es la solución, por eso todos los documentos modernos deben comenzar con él.
document.compatMode en la consola: "CSS1Compat" significa Modo Estándar, "BackCompat" significa Modo Quirks.Nota Sobre los Doctypes Heredados
Antes de HTML5, el doctype hacía referencia a una Definición de Tipo de Documento (DTD) — una gramática formal que describía qué elementos y atributos eran válidos. Estas declaraciones eran largas y fáciles de escribir incorrectamente, por ejemplo HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">HTML 4.01 existía en variantes Strict, Transitional y Frameset, y XHTML 1.0 / 1.1 añadió varias más (como "-//W3C//DTD XHTML 1.0 Strict//EN"). Aún puedes encontrarlas en bases de código más antiguas.
La conclusión importante: HTML5 las reemplazó todas con el único y corto <!DOCTYPE html>. Es el doctype válido más corto que activa de manera fiable el Modo Estándar, y es el único que necesitas escribir hoy en día.