Docs ejecutables de HTML: Doctype

Q: ¿El doctype distingue entre mayúsculas y minúsculas?

No. , y significan lo mismo. El estilo más habitual es DOCTYPE en mayúsculas con html en minúsculas.

Q: ¿Cómo compruebo si una página está en modo quirks?

Abre la consola del navegador y ejecuta document.compatMode. "CSS1Compat" significa modo estándar (o modo casi estándar), "BackCompat" significa modo quirks.

Qué es `<!DOCTYPE html>`

<!DOCTYPE html> es la declaración de tipo de documento: la primera línea de un archivo HTML, antes de la etiqueta <html>. Le dice al navegador "esto es un documento HTML moderno", y el navegador responde mostrando la página en modo estándar, según las especificaciones actuales de HTML y 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>

Esa única línea es todo el doctype de HTML5. No tiene etiqueta de cierre y no lleva nada más dentro.

Reglas de sintaxis

Va primero. Antes de él solo pueden aparecer espacios en blanco y comentarios. Cualquier texto o etiqueta antes del doctype hace que el navegador lo ignore.
No distingue mayúsculas de minúsculas. <!DOCTYPE html> y <!doctype html> son idénticos. Elige un estilo y mantenlo.
No es un elemento. No existe </!DOCTYPE>, y no puedes añadirle un class ni otros atributos.
La palabra después de DOCTYPE debe ser html. <!DOCTYPE html5> no es una versión más nueva; el navegador trata esa página como si no tuviera un doctype válido.
Uno por documento. Las páginas construidas a partir de varios archivos (plantillas, includes) siguen generando un único doctype al principio del HTML final.

Modo estándar y modo quirks

Los navegadores tienen tres modos de renderizado, y el doctype elige uno:

Modo	Lo activa	Qué cambia
Modo estándar	`<!DOCTYPE html>` y otros doctypes modernos	Todo sigue las especificaciones actuales
Modo casi estándar (limited quirks)	HTML 4.01 Transitional o Frameset con URL, XHTML 1.0 Transitional o Frameset	Casi estándar: solo cambia una regla de altura de línea, así que una imagen sola en una línea (normalmente en una celda de tabla) no deja hueco debajo
Modo quirks	Sin doctype, uno mal escrito o algunos antiguos como HTML 4.01 Transitional sin URL	Imita a los navegadores de los 90: las alturas en porcentaje, el tamaño del texto en tablas y las alturas de línea se comportan distinto

El modo quirks existe para que las páginas escritas antes de los estándares web se sigan viendo como las veían sus autores. En páginas nuevas solo da problemas: un height: 100% que funciona en una página y no en otra, o tablas que ignoran tu tamaño de letra, son síntomas clásicos de que falta el doctype.

Las vistas previas del editor en esta página siempre se muestran en modo estándar, así que borrar ahí un doctype no te enseñará el modo quirks. El comprobador de abajo usa DOMParser, que aplica las mismas reglas que usan los navegadores al cargar un archivo. Edita el doctype en el cuadro de texto y el modo se actualiza:

<!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>

Prueba a borrar la línea, escribir <!DOCTYPE html5> o poner una palabra antes del doctype: cada una de esas acciones cambia el resultado a quirks.

Doctypes antiguos: HTML 4.01 y XHTML

Antes de HTML5, un doctype nombraba un archivo DTD con un identificador público largo. Todavía los encontrarás al principio de sitios antiguos:

<!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">

Los navegadores nunca descargaban esos archivos DTD. Solo leían el identificador para elegir un modo: HTML 4.01 Strict y XHTML 1.0 Strict dan modo estándar, las versiones Transitional dan modo casi estándar, y HTML 4.01 Transitional sin la URL da modo quirks completo. Pega uno en el comprobador de arriba para probarlo; ten en cuenta que compatMode informa del modo casi estándar como CSS1Compat, el mismo valor que el modo estándar, así que solo el modo quirks completo aparece como BackCompat.

Reemplazar un doctype antiguo por <!DOCTYPE html> es seguro en páginas que ya estaban en modo estándar. Una página que estaba en modo quirks puede moverse un poco (normalmente alturas y huecos bajo las imágenes), así que revísala después del cambio.

El doctype en el DOM

El doctype se convierte en un nodo DocumentType, separado del elemento <html>. Los scripts lo leen con document.doctype, y document.compatMode indica el modo en el que terminó la página:

<!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 es la forma más rápida de comprobar cualquier sitio en vivo: abre la consola del navegador y escríbelo. "CSS1Compat" significa modo estándar (o casi estándar), "BackCompat" significa modo quirks.

Una plantilla HTML5 completa

El doctype es una parte del documento mínimo con el que debería empezar toda página. Cada línea de abajo tiene una función:

<!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>

El atributo lang y la etiqueta meta viewport tienen cada uno su propia página.

Errores comunes

Algo antes del doctype. Un carácter suelto, un echo de depuración de un script del servidor o una etiqueta HTML por encima de <!DOCTYPE html> pone toda la página en modo quirks. Los comentarios y las líneas en blanco no dan problema.
Inventar una versión. <!DOCTYPE html5> o <!DOCTYPE HTML 5> no son válidos y activan el modo quirks. El doctype de HTML5 es simplemente <!DOCTYPE html>.
Cerrarlo. <!DOCTYPE html></!DOCTYPE> no es HTML válido. La declaración no tiene etiqueta de cierre.
Omitirlo en archivos de prueba pequeños. Los errores de diseño que persigues en un archivo de pruebas sin doctype pueden no existir en la página real, y al revés.
Mantener un doctype Transitional antiguo. Pone la página en modo casi estándar sin ningún beneficio. Cámbialo por <!DOCTYPE html>.

Preguntas frecuentes

¿Qué hace <!DOCTYPE html>?

Le dice al navegador que la página es un documento HTML moderno, así que la muestra en modo estándar. Sin él, los navegadores pasan al modo quirks, que imita errores de los navegadores de finales de los años 90 y cambia cómo se calculan algunos diseños y alturas.

¿Es obligatorio <!DOCTYPE html>?

La página carga igual sin él, pero el estándar HTML lo exige y los navegadores muestran la página en modo quirks. Pon siempre <!DOCTYPE html> en la primera línea.

¿El doctype distingue entre mayúsculas y minúsculas?

No. <!DOCTYPE html>, <!doctype html> y <!DocType HTML> significan lo mismo. El estilo más habitual es DOCTYPE en mayúsculas con html en minúsculas.

¿DOCTYPE es una etiqueta HTML?

No. Es una declaración, no un elemento: no tiene etiqueta de cierre, no admite atributos y no aparece en document.body. En el DOM es un nodo DocumentType aparte, disponible como document.doctype.

¿Cuál es el doctype de HTML5?

<!DOCTYPE html>. HTML5 eliminó los largos identificadores públicos y las URL de HTML 4.01 y XHTML, y la forma corta es el único doctype que necesitas para cualquier página nueva.

¿Cómo compruebo si una página está en modo quirks?

Abre la consola del navegador y ejecuta document.compatMode. "CSS1Compat" significa modo estándar (o modo casi estándar), "BackCompat" significa modo quirks.

Conceptos relacionados