A continuación, te explicamos qué es doctype html y cómo utilizarlo correctamente.
Al crear documentos HTML, debes tener en cuenta cómo el navegador interpreta y muestra tu página. Es importante que el sitio web se vea como lo has planeado, funcione de forma predecible y se muestre correctamente.
Lo primero que ve el navegador al analizar HTML es <!DOCTYPE>. Este elemento determina cómo se representará la página: en el modo estándar moderno o en el modo de compatibilidad. Analicemos cómo funciona <!DOCTYPE>, por qué la maquetación puede fallar sin él y cómo elegir la opción correcta.
DOCTYPE html: definición y ejemplos
¿Qué es doctype html?
<!DOCTYPE> (document type declaration) -literalmente “Tipo de documento”- es una instrucción para los navegadores web que define qué versión de HTML se debe usar al trabajar con el documento.
Estrictamente hablando, <!DOCTYPE> no es una etiqueta, sino una directiva que se relaciona con la meta-información del documento. Está escrita entre corchetes angulares porque la página HTML solo procesa lo que está dentro de < >. El signo ! al principio enfatiza que no es una etiqueta común, sino una instrucción especial para el navegador.
¿Cómo se escribe?
En las especificaciones modernas de HTML5, se escribe de forma breve y sencilla:
<!DOCTYPE html>Las mayúsculas dentro de DOCTYPE no importan. Puedes escribirlo así:
<!DOCTYPE HTML>;
<!doctype html>;
<!doctype HTML>.Si usas un plugin de creación de marcado como Emmet, te sugerirá esta opción:
<!DOCTYPE html>En las versiones anteriores de HTML y XHTML se utilizaban entradas más complejas y largas. Indicaban una definición de tipo de documento específica (DTD, document type definition) y el modo de funcionamiento. Se parecía a una instrucción para una impresora:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">¿Es obligatorio escribir doctype html?
En resumen: sí.
Si no lo especificas, el navegador activará el modo de compatibilidad (quirks mode), lo que puede provocar:
- Un comportamiento diferente de los navegadores al representar la página.
- Errores en el procesamiento de CSS.
- Una colocación impredecible de los elementos en la página.
¿Dónde se coloca <!DOCTYPE> en la página?
Al maquetar <!DOCTYPE>, siempre se coloca al principio del documento HTML, en la primera línea. En cualquier otro lugar, el navegador no lo reconocerá y se activará el modo de compatibilidad.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
</head>
<body>
<h1>Encabezado</h1>
</body>
</html>¿Qué modos de visualización de documentos existen?
Si te equivocas con <!DOCTYPE>, el navegador pensará que te quedaste atascado en 2001. Este es el modo de compatibilidad.
Veamos qué otros modos de visualización existen y en qué se diferencian.
El navegador conoce tres modos de visualización de documentos:
1. Modo estándar (Standards mode)
Se activa con la indicación correcta de la directiva y obliga al navegador a seguir los estándares modernos.
Cómo activarlo:
Usa el correcto al principio del documento HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Modo estándar</title>
</head>
<body>
<h1>Ejemplo en modo estándar</h1>
</body>
</html>De esta forma, el navegador entiende que el documento sigue la especificación actual de HTML5.
2. Modo de compatibilidad (Quirks mode)
Este modo imita el comportamiento de los navegadores antiguos (IE5 y otros), en los que no funcionan algunas soluciones modernas.
Esto puede provocar una representación incorrecta de CSS, especialmente en los elementos con modelo de caja (box model).
Esto no significa que la página esté completamente rota, pero el resultado de la visualización de algunos elementos será diferente del esperado.
Cómo activarlo:
- No escribirlo. Si no hay
<!DOCTYPE>, el navegador activará el modo de compatibilidad.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Quirks Mode</title>
</head>
<body>
<h1>Ejemplo en modo de compatibilidad, porque no hay DOCTYPE</h1>
</body>
</html>- Usar un
<!DOCTYPE>antiguo o incorrecto, por ejemplo, DTD antiguos no especificados completamente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">- Añadir algo antes de
<!DOCTYPE>. Incluso un espacio o un comentario antes de<!DOCTYPE>pueden activar el modo quirks:
<!-- Comentario antes del DOCTYPE que activa quirks mode -->
<!DOCTYPE html>3. Modo casi estándar (Almost standards mode)
Difiere del modo estándar en pequeñas desviaciones en la representación, pero admite elementos obsoletos.
Cómo activarlo:
Algunas variantes de <!DOCTYPE> de HTML 4.01 Transitional y XHTML 1.0 Transitional pueden activar este modo. Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Modo casi estándar</title>
</head>
<body>
<h1>Ejemplo en modo casi estándar</h1>
</body>
</html>¿Qué versiones hay en los diferentes estándares HTML?
Estándar HTML 4.01
En HTML 4.01 existen tres variantes de <!DOCTYPE>.
- Strict (modo estricto): sin soporte para elementos obsoletos de versiones anteriores:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">- Transitional (modo de transición): admite etiquetas obsoletas, como
<font>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">- Frameset (modo de conjuntos de marcos): admite marcos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Estándar XHTML 1.0
XHTML exigía un cumplimiento estricto de la sintaxis XML y tenía tres variantes de similares:
- Strict (modo estricto);
- Transitional (modo de transición);
- Frameset (modo de conjuntos de marcos).
La entrada <!DOCTYPE> en XHTML 1.0 tenía este aspecto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Estándar HTML5
HTML5 no admite etiquetas obsoletas de versiones anteriores y se adhiere al modelo de maquetación moderno. En lugar de los largos <!DOCTYPE>, se utiliza una única variante universal corta que funciona en todos los navegadores:
<!DOCTYPE html>Un poco de práctica: intentamos descifrar <!DOCTYPE>
Cuando los desarrolladores web pasaron de las versiones antiguas de HTML a estándares más estructurados, pero aún necesitaban compatibilidad con versiones anteriores, activaban el modo casi estándar, lo que permitía:
- Usar tanto elementos HTML modernos como obsoletos respetando una estructura correcta.
- Dar estilo a la página usando estilos incrustados en el marcado (
style="").
Actualmente, se puede mantener una página que contiene código obsoleto con el estándar HTML 4.01.
Para indicar correctamente la directiva, es necesario entender de qué se compone. Para ello, intentemos descifrar <!DOCTYPE> del modo de visualización casi estándar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Solución:
<!DOCTYPE HTML PUBLIC— declaración del tipo de documento, indicando que se utiliza un DTD público.-//W3C//DTD HTML 4.01 Transitional//EN— descripción del estándar:-//W3C//— la especificación fue desarrollada por W3C (World Wide Web Consortium).DTD HTML 4.01— versión del estándar (HTML 4.01).Transitional— permite el uso de elementos obsoletos (por ejemplo,<font>,<center>,<iframe>).//EN— idioma del documento (inglés).
"http://www.w3.org/TR/html4/loose.dtd"— enlace al documento DTD oficial.
Errores comunes
Hay dos errores principales al usar <!DOCTYPE>:
- La página debe usar solo HTML5, pero la directiva
<!DOCTYPE>está ausente o está mal indicada.
Problema: La página solo usa código moderno, pero:
- La directiva no se especifica.
- Contiene errores de sintaxis.
- No se encuentra al principio del documento.
Debido a esto, el navegador puede cambiar al modo de compatibilidad y mostrar la página incorrectamente, ignorando las características de HTML5.
Solución:
- Haz que la directiva sea el primer elemento de la página.
- Usa la entrada correcta
<!DOCTYPE html>para HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página para HTML5</title>
</head>
<body>
<h1>La página solo admite código HTML5 moderno</h1>
</body>
</html>- La página usa código moderno y obsoleto, pero no se ha definido el modo de compatibilidad adecuado.
Problema: En el código de la página hay elementos modernos y obsoletos (por ejemplo, etiquetas y atributos de HTML4), pero la directiva <!DOCTYPE> no corresponde al estándar necesario (por ejemplo, se usa HTML5 en lugar de Transitional). Como resultado, el navegador puede representar la página en modo “casi compatible”.
Solución:
- Asegúrate de que
<!DOCTYPE>esté en la primera línea. - Asegúrate de que los parámetros de la directiva estén escritos completa y correctamente, que se haya seleccionado la versión correcta del estándar y que esté presente el parámetro
Transitional.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página para el modo casi estándar</title>
</head>
<body>
<h1>La página admite código obsoleto y moderno</h1>
</body>
</html>Consejos y trucos útiles
Usa Emmet para crear rápidamente la estructura inicial: esto evitará errores en el marcado. Emmet crea una página HTML5 y escribe <!DOCTYPE> en el formato actual.
En editores como VS Code, puedes escribir ! y presionar Tab: obtendrás una plantilla de documento HTML lista para usar. Incluye inmediatamente <!DOCTYPE>, <html lang="...">, <meta charset="UTF-8"> y todo lo que a menudo se olvida al introducirlo manualmente. Esto ahorrará tiempo y evitará errores al elegir la directiva.
Si trabajas con un sitio web moderno, pero el código contiene elementos obsoletos, es razonable activar el modo casi estándar. Pero si hay poco código de este tipo, es mejor reescribirlo según el estándar HTML5. El modo quirks no se recomienda aquí: algo se mostrará correctamente, pero algo seguramente se comportará de forma errática.
FAQs sobre doctype html
¿Qué es doctype html en pocas palabras?
Es una directiva que literalmente significa “Tipo de documento” y le indica al navegador qué versión de HTML usar para interpretar la página.
¿Qué pasa si no uso doctype html?
El navegador activará quirks mode, causando errores de maquetación y diferencias de visualización entre navegadores.
¿Cuál es la forma correcta de escribir doctype en HTML5?
La única recomendada hoy en día es: <!DOCTYPE html>
¿doctype html es una etiqueta?
No. Es una declaración, no forma parte del contenido de la página y no tiene cierre como las etiquetas HTML.
¿Dónde se coloca doctype html?
Siempre en la primera línea del documento, antes de <html>.
