HTML/CSS

De HTML 1.0 a HTML Living Standard: La evolución del lenguaje de la web

20 mar 2026

HTML (HyperText Markup Language) es el lenguaje sobre el que se construye toda la web.
Desde un puñado de etiquetas inventadas en 1991 hasta el estándar vivo que tenemos hoy, su evolución refleja cómo ha cambiado Internet durante más de tres décadas.

En este artículo repasamos cada versión importante de HTML, qué introdujo cada una y cómo esos cambios transformaron la forma de construir páginas web.

HTML 1.0 (1991): El origen

Tim Berners-Lee publicó la primera descripción de HTML en 1991 mientras trabajaba en el CERN.
No existía ningún estándar oficial, solo una propuesta con 18 elementos pensados para documentos científicos enlazados entre sí.

Las etiquetas disponibles eran mínimas:

<h1>Título principal</h1>
<p>Un párrafo de texto.</p>
<a href="otro-documento.html">Enlace</a>
<ul>
  <li>Elemento de lista</li>
</ul>

No había imágenes, no había estilos y no había formularios.
La web era solo texto con hipervínculos.

HTML 2.0 (1995): La primera especificación formal

En noviembre de 1995, el IETF publicó HTML 2.0 como el primer estándar oficial (RFC 1866).
Su objetivo fue documentar lo que los navegadores ya soportaban en la práctica.

La novedad más importante fueron los formularios:

<form action="/buscar" method="get">
  <input type="text" name="q" />
  <input type="submit" value="Buscar" />
</form>

También se formalizó el soporte a imágenes con <img>, que Mosaic ya había implementado de forma no oficial.

HTML 3.2 (1997): Tablas y el caos visual

La W3C publicó HTML 3.2 en enero de 1997, añadiendo soporte oficial para tablas, scripts y applets.

Las tablas se convirtieron en la herramienta de maquetación de la época porque CSS aún no era viable:

<table width="100%" border="0" cellpadding="8">
  <tr>
    <td width="200">Menú lateral</td>
    <td>Contenido principal</td>
  </tr>
</table>

También entraron etiquetas de presentación como <font>, <center> o <b> que mezclan contenido y estilo, algo que más tarde HTML5 trataría de erradicar.

HTML 4.01 (1999): Separación de contenido y estilo

HTML 4.01, publicado en diciembre de 1999, marcó un punto de inflexión.
La W3C apostó claramente por separar el contenido (HTML) de la presentación (CSS) y el comportamiento (JavaScript).

Se desaconsejaron los atributos de presentación (bgcolor, align, font) en favor de hojas de estilo, y se introdujo soporte mejorado para accesibilidad y internacionalización.

Existía en tres variantes:

Strict: sin etiquetas de presentación obsoletas.
Transitional: permitía las etiquetas antiguas para compatibilidad.
Frameset: para páginas con <frameset>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <h1>Hola mundo</h1>
  </body>
</html>

XHTML 1.0 (2000): La apuesta por XML

A principios de los 2000, la W3C pensó que el futuro era reformular HTML como XML.
Nació así XHTML 1.0 en enero del 2000: HTML con las reglas estrictas de XML.

Las reglas eran claras y rígidas:

<!-- Correcto en XHTML -->
<br />
<img src="foto.jpg" alt="Descripción" />
<input type="text" name="q" />

<!-- Incorrecto en XHTML -->
<br>
<IMG SRC="foto.jpg">
<input type=text>

Las etiquetas debían cerrarse siempre, los atributos ir entre comillas y todo en minúsculas.
La idea era buena, pero la rigidez era un problema: un solo error de sintaxis rompía toda la página.
Los navegadores nunca aplicaron la validación estricta y XHTML cayó en desuso.

El camino hacia HTML5 (2004–2008)

Mientras la W3C seguía trabajando en XHTML 2.0 (que nunca llegó a publicarse), un grupo de empresas —Apple, Mozilla y Opera— fundaron en 2004 el WHATWG (Web Hypertext Application Technology Working Group).

Su filosofía era radicalmente diferente:

Evolucionar HTML de forma retrocompatible.
Basarse en lo que los navegadores ya hacían en la práctica.
No romper la web existente.

Ese trabajo se convertiría en HTML5.

HTML5 (2014): La revolución moderna

La W3C publicó HTML5 como recomendación oficial en octubre de 2014, aunque los navegadores habían implementado sus características progresivamente desde 2008.

HTML5 fue una reescritura casi completa de la especificación y trajo los cambios más importantes en la historia del lenguaje.

DOCTYPE simplificado

<!DOCTYPE html>

Un solo DOCTYPE válido, sencillo de recordar, sin URL ni versión.

Etiquetas semánticas

HTML5 introdujo elementos que dan significado a la estructura de la página, reemplazando los <div> genéricos:

<header>
  <nav>
    <a href="/">Inicio</a>
    <a href="/blog">Blog</a>
  </nav>
</header>

<main>
  <article>
    <h1>Título del artículo</h1>
    <section>
      <p>Contenido de la sección.</p>
    </section>
  </article>

  <aside>
    <p>Contenido relacionado.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Mi sitio</p>
</footer>

Etiqueta	Propósito
`<header>`	Cabecera de página o sección
`<nav>`	Bloque de navegación
`<main>`	Contenido principal (único por página)
`<article>`	Contenido independiente y reutilizable
`<section>`	Agrupación temática de contenido
`<aside>`	Contenido relacionado pero secundario
`<footer>`	Pie de página o sección

Audio y vídeo nativos

Antes de HTML5, reproducir vídeo requrería Flash. Ahora es HTML puro:

<video controls width="640" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Tu navegador no soporta vídeo HTML5.
</video>

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
</audio>

Canvas: gráficos por código

El elemento <canvas> permite dibujar gráficos 2D (y 3D con WebGL) directamente con JavaScript:

<canvas id="miCanvas" width="300" height="150"></canvas>

<script>
  const canvas = document.getElementById('miCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(20, 20, 150, 100);
</script>

Nuevos tipos de input

HTML5 amplió los formularios con tipos de campo especializados que mejoran la experiencia en móvil y añaden validación nativa:

<input type="email" placeholder="tu@correo.com" required />
<input type="url" placeholder="https://ejemplo.com" />
<input type="number" min="0" max="100" step="5" />
<input type="range" min="0" max="10" />
<input type="date" />
<input type="color" />
<input type="search" />
<input type="tel" />

Atributos de datos personalizados

Con data-* puedes almacenar datos propios sin atributos no estándar:

<li data-id="42" data-categoria="frontend">
  Artículo sobre HTML5
</li>

<script>
  const item = document.querySelector('li');
  console.log(item.dataset.id);        // "42"
  console.log(item.dataset.categoria); // "frontend"
</script>

Web Storage

Almacenamiento en el navegador sin cookies:

<script>
  // sessionStorage: dura mientras dure la pestaña
  sessionStorage.setItem('tema', 'oscuro');

  // localStorage: persiste aunque se cierre el navegador
  localStorage.setItem('usuario', 'ana');
  console.log(localStorage.getItem('usuario')); // "ana"
</script>

HTML Living Standard (2019–hoy): La web sin versiones

En mayo de 2019, la W3C y el WHATWG firmaron un acuerdo: habría un único estándar de HTML, mantenido por el WHATWG como HTML Living Standard.

Ya no hay versiones numeradas. El estándar evoluciona de forma continua en html.spec.whatwg.org.

Estas son algunas de las incorporaciones más recientes:

`<dialog>`: ventanas modales nativas

<dialog id="modal">
  <p>¿Estás seguro de que quieres eliminar esto?</p>
  <button onclick="document.getElementById('modal').close()">
    Cancelar
  </button>
</dialog>

<button onclick="document.getElementById('modal').showModal()">
  Abrir modal
</button>

`<details>` y `<summary>`: acordeones sin JavaScript

<details>
  <summary>¿Qué es HTML?</summary>
  <p>
    HTML es el lenguaje de marcado estándar para crear páginas web.
  </p>
</details>

`loading="lazy"`: carga diferida nativa

<!-- La imagen se carga solo cuando está cerca del viewport -->
<img src="foto.jpg" alt="Descripción" loading="lazy" />

Permite crear menús emergentes y tooltips de forma nativa:

<button popovertarget="tooltip">Mostrar info</button>

<div id="tooltip" popover>
  <p>Este es el contenido del popover.</p>
</div>

`<search>`: rol semántico de búsqueda

<search>
  <form action="/buscar">
    <input type="search" name="q" placeholder="Buscar…" />
    <button type="submit">Buscar</button>
  </form>
</search>

Línea del tiempo

Versión	Año	Hito principal
HTML 1.0	1991	Nacimiento del lenguaje (18 etiquetas)
HTML 2.0	1995	Primera especificación formal, formularios
HTML 3.2	1997	Tablas, scripts
HTML 4.01	1999	Separación contenido/presentación, accesiblidad
XHTML 1.0	2000	HTML como XML estricto
HTML5	2014	Semántica, multimedia nativa, APIs del navegador
HTML Living Standard	2019	Estándar único y continuo (WHATWG)

Conclusión

HTML ha pasado de ser un lenguaje para documentos científicos a ser la base de aplicaciones web complejas, juegos, herramientas en tiempo real y experiencias multimedia ricas.

Lo más importante de su evolución no es la acumulación de etiquetas, sino el cambio de filosofía: de mezclar contenido y presentación a separar responsabilidades, y de versiones cerradas a un estándar vivo que mejora de forma continua.

Si aprendes HTML bien —semántica, accesibilidad y las APIs modernas— tienes una base que no caduca.