Estructura básica de un documento HTML: antes y ahora

4 de octubre de 2025

El lenguaje HTML ha evolucionado significativamente desde sus inicios. Una de las mejoras más notables es la simplificación de su estructura básica, que hoy en día es más limpia, legible y fácil de escribir. En este post, comparamos cómo se veía un documento HTML típico antes de HTML5 (en la era de HTML4 y XHTML) con cómo se escribe hoy en día con HTML5.

🕰️ Antes: HTML4 / XHTML (años 90 - 2000s)

En la era de HTML4 (1997) y especialmente con XHTML 1.0 (2000), los documentos HTML eran mucho más verbosos. Se requerían declaraciones largas, namespaces, tipos de contenido explícitos y una sintaxis estricta (especialmente en XHTML).

Ejemplo típico (XHTML 1.0 Strict)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Mi página antigua</title>
  <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
  <h1>¡Hola mundo!</h1>
  <p>Este es un documento XHTML.</p>
</body>
</html>

Características del “antes”:

DOCTYPE largo y complejo: difícil de recordar, con URLs completas.
Namespace obligatorio: xmlns=“http://www.w3.org/1999/xhtml”.
Meta charset con sintaxis antigua: http-equiv=“Content-Type”.
Atributos duplicados para idioma: xml:lang y lang.
Sintaxis estricta: todas las etiquetas debían cerrarse (<br />, <img />), y los atributos entre comillas siempre.
Tipos MIME explícitos: type=“text/css” en <link>, type=“text/javascript” en <script>. ➡️ Funcionaba, pero era rígido, redundante y propenso a errores.

✨ Ahora: HTML5 (desde 2014, pero adoptado antes)

HTML5 trajo una revolución de simplicidad. Su objetivo fue hacer el lenguaje más accesible, semántico y fácil de escribir, sin sacrificar potencia.

Ejemplo moderno (HTML5)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi página moderna</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h1>¡Hola mundo!</h1>
  <p>Este es un documento HTML5.</p>
</body>
</html>

Características del “ahora”:

DOCTYPE ultra simple: <!DOCTYPE html> (funciona en todos los navegadores).
Sin namespace: ya no se necesita xmlns.
Charset simplificado: <meta charset="UTF-8">.
Viewport incluido por defecto: esencial para diseño responsivo.
Atributos sin comillas (opcional): aunque se recomienda usarlas, no son obligatorias en todos los casos.
Tipos implícitos: ya no se necesita type="text/css" ni type="text/javascript" (el navegador lo asume).
Etiquetas auto-cerrantes más flexibles: <br>, <img> son válidas sin barra. ✅ Más corto, más legible, más amigable para principiantes y profesionales.

🔍 Comparación lado a lado

ELEMENTO	ANTES (XHTML)	AHORA (HTML5)
Doctype	Largo, con URL	`<!DOCTYPE html>`
Charset	`<meta http-equiv="Content-Type" ...>`	`<meta charset="UTF-8">`
Idioma	`lang="es" xml:lang="es"`	`lang="es"`
Namespace	`xmlns="http://www.w3.org/1999/xhtml"`	No necesario
Enlace CSS	`<link rel="stylesheet" type="text/css" href="...">`	`<link rel="stylesheet" href="...">`
Etiquetas vacías	`<br />`, `<img src="..." />`	`<br>`, `<img src="...">`
Responsive	No estándar	`<meta name="viewport" ...>`

¿Por qué cambió?

HTML5 no solo simplificó la sintaxis, sino que también:

Priorizó la compatibilidad con la web real (no solo con estándares teóricos).
Adoptó una filosofía de “funciona en la práctica”.
Integró mejoras para multimedia, gráficos, formularios y accesibilidad.
Hizo que el desarrollo web fuera más accesible para nuevos programadores.

Conclusión

La evolución de HTML refleja un cambio de mentalidad: de la rigidez académica a la pragmática del mundo real. Hoy, con HTML5, podemos escribir código más limpio, rápido y mantenible, sin perder potencia ni compatibilidad.

Si aún ves código antiguo en tutoriales o proyectos heredados, ya sabes: es historia. El presente (y futuro) es HTML5.

¿Recuerdas tus primeros archivos HTML? ¡Cuéntame en los comentarios!