Acerca de este problema HTML
Cuando un navegador encuentra un documento, la declaración de doctype es lo primero que lee para determinar qué modo de renderización usar. Existen tres modos: modo quirks, modo casi estándar y modo estándar completo. El modo casi estándar fue introducido como un paso de transición: renderiza las páginas en su mayoría de acuerdo a los estándares pero mantiene algunos comportamientos heredados, particularmente alrededor de cómo las imágenes dentro de celdas de tabla se distribuyen. Los doctypes que activan este modo incluyen:
-
<!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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Estos doctypes eran comunes durante la era de XHTML y HTML 4 pero ahora se consideran obsoletos. El W3C HTML Validator (Nu HTML Checker) está diseñado para documentos HTML5 y espera la declaración simple <!DOCTYPE html>.
Por qué esto importa
-
Cumplimiento de estándares: El HTML Living Standard (mantenido por WHATWG) especifica
<!DOCTYPE html>como el único doctype válido. Usar cualquier otra cosa significa que tu documento no se ajusta al estándar actual. - Consistencia de renderización: Aunque el modo casi estándar está cerca del modo estándar completo, las diferencias sutiles, especialmente alrededor del dimensionamiento vertical de imágenes en celdas de tabla, pueden llevar a comportamientos de diseño inesperados entre navegadores.
- Preparación para el futuro: Los doctypes heredados vinculan tus páginas a especificaciones desactualizadas. Las herramientas modernas, linters y validadores todos esperan HTML5, y mantener un doctype antiguo puede enmascarar otros problemas.
- Simplicidad: El doctype de HTML5 es corto, fácil de recordar e insensible a mayúsculas y minúsculas. No hay razón para usar una declaración más larga y compleja.
Cómo solucionarlo
Reemplaza el doctype heredado en la primera línea de tu documento HTML con <!DOCTYPE html>. No se necesita identificador público, identificador de sistema ni URL de DTD. Después de hacer el cambio, revisa tu página para cualquier cambio en el diseño: en la mayoría de casos no habrá ninguno, pero las páginas que dependían del comportamiento sutil del modo casi estándar alrededor de imágenes en celdas de tabla pueden necesitar un pequeño ajuste de CSS (como establecer img { display: block; } o img { vertical-align: bottom; } en las imágenes afectadas).
Ejemplos
❌ Doctype heredado que activa el modo casi estándar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
❌ Doctype HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
✅ Doctype HTML5 correcto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
El doctype de HTML5 es el doctype más corto posible que activa el modo estándar completo en todos los navegadores modernos. Funciona independientemente de las mayúsculas y minúsculas (<!DOCTYPE html>, <!doctype html>, o <!Doctype Html> son todos equivalentes), aunque se recomienda en minúsculas o la forma mixta convencional mostrada arriba para consistencia.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.