HTML4 vs HTML5: diferencias que importan

Si te preguntas cuáles son las diferencias entre HTML4 y HTML5, la respuesta corta es esta: HTML4 servía para maquetar documentos, y HTML5 está pensado para construir aplicaciones web completas. HTML5 añade etiquetas con significado, vídeo y audio sin plugins, formularios con validación integrada y un conjunto de APIs que antes dependían de Flash o de JavaScript a medida.

En esta guía repasamos todas las diferencias de HTML4 vs HTML5 que importan en la práctica: el doctype, la semántica, el contenido multimedia, los formularios, las APIs, la accesibilidad, el SEO y las etiquetas que ya no se deben usar.

HTML4: la base del diseño web antes de HTML5

El W3C (World Wide Web Consortium) publicó HTML 4.0 en diciembre de 1997 y su revisión, HTML 4.01, en diciembre de 1999. Fue el estándar de referencia durante más de una década. A partir de 2000 convivió con XHTML 1.0, que era básicamente HTML4 escrito con las reglas estrictas de XML.

HTML4 nació para estructurar documentos de texto con enlaces, tablas y formularios sencillos. La web de entonces no tenía vídeo, apenas se navegaba desde el móvil y las páginas se diseñaban pensando en monitores de escritorio. Con el tiempo se le pidió mucho más de lo que podía dar, y los desarrolladores tuvieron que rellenar los huecos con trucos y complementos.

Características clave de HTML4

• Uso masivo de <div> y <span> para todo, sin significado semántico.
• Dependencia de plugins como Flash o Java para vídeo, audio, animaciones y juegos.
• Tres variantes de doctype (Strict, Transitional y Frameset) con declaraciones largas y difíciles de recordar.
• Etiquetas de presentación como <font>, <center> o <big>, que mezclaban diseño y contenido.
• Formularios muy limitados: todos los campos de texto eran type="text" y la validación había que programarla en JavaScript.
• Sin reglas comunes para el código mal escrito: cada navegador interpretaba los errores a su manera.

HTML5 y sus ventajas frente a HTML4

HTML5 empezó a desarrollarse en 2004 dentro del WHATWG, un grupo formado por fabricantes de navegadores, y el W3C lo publicó como Recomendación oficial en octubre de 2014. Desde 2019, ambos organismos acordaron mantener una única versión: el HTML Living Standard del WHATWG, que se actualiza de forma continua. Por eso hoy, cuando se habla de «HTML5», en realidad se habla del HTML actual.

Su objetivo fue adaptar el lenguaje a cómo se usa de verdad la web: móviles, vídeo, aplicaciones interactivas y contenido accesible para todo el mundo.

Novedades más relevantes

• Etiquetas semánticas: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> o <time>.
• Audio y vídeo nativos con <audio> y <video>, sin plugins.
• Gráficos con <canvas> y SVG insertado directamente en el HTML.
• Formularios nuevos: tipos de campo como email, tel, date o number y atributos como placeholder, required o pattern.
• Atributos personalizados data-* para guardar información que luego usa JavaScript.
• Un algoritmo de análisis definido: la especificación explica cómo debe tratar cada navegador el código con errores, de modo que todos muestran la página igual.

Doctype y estructura básica del documento

La diferencia más visible está en la primera línea del archivo. En HTML 4.01 Strict, el doctype era así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

En HTML5 se reduce a una sola línea, válida para cualquier página:

<!DOCTYPE html>

Lo mismo ocurre con la codificación de caracteres. HTML4 usaba <meta http-equiv="Content-Type" content="text/html; charset=utf-8">, y HTML5 lo simplifica a <meta charset="utf-8">. Tampoco hace falta indicar type="text/javascript" en los scripts ni type="text/css" en los estilos: son los valores por defecto. Además, HTML5 añade el atributo async para cargar scripts sin bloquear la página, junto al defer que ya existía.

Comparación semántica: HTML4 vs HTML5

En HTML4, la estructura de una página se construía con <div> genéricos identificados con un id o una clase. El nombre id="header" lo entendía el programador, pero no el navegador, el lector de pantalla ni el buscador: para ellos todos los div eran iguales.

HTML5 introduce elementos que dicen qué es cada parte de la página:

HTML5 también redefine algunas etiquetas antiguas en lugar de eliminarlas. <b> e <i> ya no significan «negrita» y «cursiva», sino texto destacado sin énfasis especial y texto con otro tono (un término técnico, una palabra extranjera). Para el énfasis real se usan <strong> y <em>.

Multimedia sin plugins: audio, vídeo y gráficos

Con HTML4, insertar un vídeo exigía <object> o <embed> y un reproductor externo, casi siempre Flash. Adobe dejó de dar soporte a Flash a finales de 2020 y los navegadores lo bloquean, así que esas páginas ya no funcionan.

En HTML5 basta con esto:

<video controls width="640" poster="portada.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="subtitulos.vtt" srclang="es" label="Español">
</video>

• <source> permite ofrecer varios formatos y el navegador elige el que soporta.
• <track> añade subtítulos en formato WebVTT, clave para la accesibilidad.
• <canvas> ofrece una superficie de dibujo que se controla con JavaScript: gráficos, juegos o editores de imagen.
• El SVG y MathML se pueden escribir directamente dentro del HTML.
• Elementos como <picture> y el atributo srcset, incorporados después, permiten servir imágenes adaptadas a cada pantalla.

Formularios más inteligentes

Los formularios son una de las mejoras que más se notan en el móvil. HTML5 añade nuevos tipos de input que el navegador entiende y trata de forma especial:

• type="email" y type="url" comprueban el formato y muestran un teclado adaptado.
• type="tel" abre el teclado numérico del teléfono.
• type="number" y type="range", con min, max y step.
• type="date", type="time" y type="color" muestran selectores nativos.
• type="search" para buscadores internos.

A eso se suman atributos como required (campo obligatorio), pattern (expresión regular que debe cumplir el valor), placeholder, autofocus o autocomplete, y elementos como <datalist> para sugerencias y <output> para mostrar resultados. La validación básica ya no necesita JavaScript, aunque los datos siempre deben volver a comprobarse en el servidor.

APIs de JavaScript asociadas a HTML5

Bajo la etiqueta «HTML5» se suele agrupar un conjunto de APIs que permiten hacer en el navegador lo que antes requería plugins. Algunas forman parte de la propia especificación HTML y otras son estándares independientes que llegaron en la misma época:

• Web Storage (localStorage y sessionStorage): guarda datos en el navegador, con más capacidad y más sencillez que las cookies.
• History API (pushState): cambia la URL sin recargar la página, la base de muchas aplicaciones web actuales.
• Drag and Drop: arrastrar y soltar elementos y archivos.
• Web Workers: ejecuta código en segundo plano sin bloquear la interfaz.
• Geolocalización, WebSockets y la API de archivos (File API), que son especificaciones aparte pero se popularizaron junto a HTML5.

Accesibilidad mejorada con HTML5

Los elementos semánticos de HTML5 tienen un papel implícito que los lectores de pantalla entienden sin configuración extra. Un <nav> se anuncia como zona de navegación, <main> como contenido principal y el <header> y el <footer> de la página como cabecera y pie. Así, una persona ciega puede saltar directamente a la parte que le interesa en lugar de escuchar la página entera.

• Con HTML4 había que añadir atributos role de WAI-ARIA a mano. Con HTML5 muchos sobran: la regla de oro de ARIA es usar el elemento nativo siempre que exista.
• Los controles nativos (<button>, <video controls>, los nuevos campos de formulario) ya son accesibles por teclado.
• Los subtítulos con <track> y los textos alternativos bien escritos ayudan a cumplir las pautas WCAG.

Eso sí, HTML5 no hace una web accesible por sí solo. Hay que usar los encabezados en orden, etiquetar todos los campos con <label>, cuidar el contraste y probar la navegación con teclado.

HTML5 y su impacto en SEO

Usar etiquetas semánticas no es un factor de posicionamiento por sí mismo: Google no sube una página por usar <article> en lugar de <div>. Pero un HTML bien estructurado sí ayuda de forma indirecta:

• Los buscadores y los sistemas de IA identifican con más facilidad cuál es el contenido principal y cuál el menú, la barra lateral o el pie.
• Una jerarquía clara de encabezados facilita que Google entienda de qué trata cada sección.
• Sin plugins y con menos código de relleno, las páginas pesan menos y cargan más rápido, algo que se refleja en las métricas Core Web Vitals.
• El vídeo con <video> es rastreable y funciona en cualquier dispositivo, al contrario que el antiguo contenido en Flash.

En nuestros proyectos de diseño web en Logroño trabajamos siempre con HTML semántico, y es uno de los puntos que revisamos cuando hacemos SEO en Logroño para un cliente.

Etiquetas obsoletas en HTML5

HTML5 declara obsoletas muchas etiquetas de HTML4, sobre todo las que servían para dar formato visual. Los navegadores las siguen mostrando para no romper webs antiguas, pero no deben usarse en código nuevo:

También quedan obsoletos atributos de presentación como align, bgcolor o border en tablas e imágenes. Todo lo visual pasa a CSS.

Resumen de las diferencias entre HTML4 y HTML5

Conclusión

HTML5 supera a HTML4 en todo lo que importa hoy: estructura, semántica, multimedia, formularios, accesibilidad y compatibilidad con móviles. En la práctica, la pregunta ya no es cuál elegir, porque todos los navegadores actuales trabajan con HTML5 y HTML4 solo sobrevive en webs antiguas sin mantenimiento.

Si tu web todavía usa tablas para maquetar, etiquetas como <font> o contenido en Flash, es una señal clara de que necesita una renovación. Un buen mantenimiento web evita llegar a ese punto, y si quieres saber qué otros fallos frenan una página, te recomendamos leer los errores comunes en diseño web.

Referencias

• WHATWG: HTML Living Standard
• W3C: HTML 4.01 Specification
• MDN Web Docs: Referencia de HTML
• web.dev: Learn HTML