HTML vs HTML5: Conoce las

diferencias cruciales entre ellos

Downloaded on: 05 December 2023

 Ship and manage your
web projects faster
Deploy your projects on Google Cloud Platform's top tier
infrastructure. You'll get 25+ data centers to choose
from, 24/7/365 expert support, and advanced security
with DDoS protection.

Try for free

HTML vs HTML5. ¿Cuál es la gran diferencia? Si estás buscando entrar en el desarrollo

frontend o trabajar con código en WordPress, necesitas conocer la diferencia. Puede ser
especialmente confuso porque algunas personas pueden utilizar los dos términos
indistintamente, pero técnicamente son dos cosas diferentes, aunque también están
relacionadas.

Repasemos las diferencias entre HTML y HTML5, cuál es mejor y qué ha cambiado con la
mayor actualización del popular lenguaje de marcas.

¿Qué es el HTML?
HTML son las siglas de HyperText Markup Language. Constituye los bloques de
construcción de la web y es probablemente el lenguaje de codificación más conocido.

HTML es el lenguaje estándar utilizado para el desarrollo web. Permite crear la estructura
base de una página web mediante pequeñas etiquetas llamadas etiquetas de marcado. Por
ejemplo, para poner en cursiva un texto, puedes envolverlo en etiquetas HTML como tal:

<i>Italicized text.</i>

— Ejemplo de etiqueta HTML

Gran parte del HTML es igualmente sencillo y legible, por lo que incluso los no
desarrolladores encuentran fácil trabajar con él. Para lo importante que es para la World
Wide Web, aprender HTML es sorprendentemente fácil.

Es imposible crear un sitio web sin usar HTML. Aunque hay creadores de sitios web que te
permiten diseñar un sitio sin tocar ningún código, incluido WordPress, siguen manejando el
código HTML por ti entre bastidores.

Por lo tanto, si quieres convertirte en un desarrollador web o profundizar en herramientas

como WordPress, naturalmente tendrás que aprender HTML.

El HTML suele combinarse con otros lenguajes como CSS y JavaScript para ampliar su
funcionalidad. El CSS ayuda a dar estilo al HTML añadiendo colores, diseños y mucho más,
mientras que JavaScript es un lenguaje de programación más tradicional que permite añadir
funciones avanzadas.
Aunque estos dos lenguajes se combinan bien con HTML, no son estrictamente necesarios
para crear un sitio web. HTML sí es necesario, y por eso es el lenguaje web más importante.

¿Qué es HTML5?

— Logotipo de HTML5 (Fuente: W3C)

HTML5 no es un sistema independiente, sino la última versión de la tecnología HTML. Su

predecesor, HTML4, tuvo su primera y última actualización en diciembre de 1999. En
realidad, HTML5 no es muy nuevo en sí mismo, ya que se lanzó hace varios años, en 2014.

Entonces, ¿cuál es la gran diferencia? ¿Por qué todo este jaleo? Aunque muchas de las
etiquetas de marcado permanecen sin cambios (no hay que arreglar lo que no está roto,
después de todo), varias de ellas se han simplificado, por lo que es mucho más fácil y rápido
escribir código. Se basa en un estándar completamente nuevo, y su análisis sintáctico
también es completamente diferente.
A diferencia de las versiones anteriores de HTML, que permitían crear sitios principalmente
estáticos que necesitaban ser aderezados con CSS y JavaScript, HTML5 es mucho más
dinámico e incluye elementos multimedia. Soporta de forma nativa el vídeo y el audio, e
incluso puedes crear juegos o animaciones con él.

En otras palabras, HTML5 es totalmente capaz de hacer cosas que antes había que hacer
con herramientas antiguas como JavaScript, Flash o Silverlight. Esto significa que tu sitio es
más seguro y está menos abierto a los exploits de los atacantes que intentan entrar.

Y aunque CSS y JavaScript siguen siendo definitivamente necesarios para crear un sitio web
completo, ya no es necesario depender de ellos para hacer nada dinámico en absoluto.

HTML5 ya no es sólo un constructor de sitios web. Es todo un constructor de aplicaciones

por sí mismo.

En lugar de que la próxima actualización salga como «HTML6», HTML5 se actualiza

continuamente como un estándar vivo que evoluciona según las necesidades de la web. Es
la última y mejor versión de esta tecnología de larga duración, y va a estar aquí durante
mucho tiempo.

HTML vs HTML5: Sopesando las diferencias

Cuando la mayoría de la gente habla de «HTML», se refiere a la tecnología en su conjunto,
incluida su última versión: HTML5. Aunque es muy diferente en muchos aspectos, HTML5 no
es más que una actualización pulida del antiguo estándar.

Aunque HTML y HTML5 forman parte del mismo sistema, la gran actualización ha aportado
varias mejoras al antiguo lenguaje de codificación, haciéndolo aún más eficiente. He aquí
algunos ejemplos de lo que se ha añadido.

Compatibilidad

Cuando salió HTML5, la compatibilidad era una gran preocupación y una de las principales
razones por las que muchos decidieron no actualizar su sitio todavía. Si el navegador no
sabía cómo analizar una etiqueta HTML5, podía dar lugar a páginas rotas o de aspecto
extraño.
Lo contrario es cierto: los sitios web escritos en los antiguos estándares HTML4 a menudo se
rompen en los navegadores modernos, ya que los navegadores hace tiempo que han dejado
de soportar las funciones obsoletas. Si quieres seguir siendo compatible con los
navegadores de la mayoría de la gente, HTML5 es el camino a seguir.

Aunque las versiones más antiguas de HTML funcionan bien en navegadores como Internet
Explorer, estas versiones obsoletas ya no son compatibles ni son utilizadas por la mayoría de
los usuarios. La mayoría de la gente no necesitará codificar un sitio web para navegadores
tan antiguos, por lo que no es necesario utilizar HTML4.

Como puedes ver aquí, HTML5 y la mayoría de sus funciones son compatibles con todos los
navegadores modernos. Sus nuevas etiquetas son total o parcialmente compatibles con
todos los navegadores excepto con las versiones 6-8 de Internet Explorer y Firefox 2, todos
ellos de principios de la década de 2000 y que rara vez se utilizan en la actualidad.

— Comprobación de la compatibilidad de los navegadores con HTML y HTML5

Aunque todos los navegadores modernos son técnicamente compatibles con HTML4, la
compatibilidad con las etiquetas obsoletas es, en el mejor de los casos, irregular. Deberías
evitar el uso de estándares obsoletos y cambiar a HTML5.

Soporte multimedia

Una de las mayores novedades que aporta HTML5 es la compatibilidad con elementos
multimedia como audio, vídeo, gráficos vectoriales, animaciones y juegos.

En los viejos tiempos de la Web, para poner una simple animación en tu sitio generalmente
se requería usar JavaScript, Flash o alguna otra tecnología. Ahora puedes hacerlo en HTML
o CSS sin tener que exponerte a posibles exploits.

Con el vídeo y el audio, incrustar un reproductor es tan fácil como colocar una simple
etiqueta. A partir de ahí se pueden hacer muchas configuraciones, como activar la
reproducción automática o añadir controles al reproductor.

— Reproductor de audio HTML5

HTML5 también admite la incrustación de gráficos vectoriales SVG, imágenes que pueden
cambiar de tamaño a cualquier resolución sin pixelarse. Los SVG son cada vez más
populares para mostrar gráficos en línea, ya que se extienden bien para llenar cualquier
tamaño de pantalla.

Por último, puedes crear videojuegos completos con HTML5, especialmente si lo combinas
con JavaScript. Muchas herramientas de creación de juegos incluso se adaptan a HTML5 y
te permiten incrustar el resultado en tu sitio web.

Este soporte multimedia convierte a HTML5 en el candidato ideal para sustituir muchas
tecnologías obsoletas, como Java Web Start, Silverlight y, más recientemente, Flash. Casi
todo lo que se puede hacer con estos sistemas se puede hacer de forma más sencilla y
eficiente en HTML5.

SGML

El lenguaje HTML original (hasta la versión 4) se basaba en gran medida en el estándar

SGML o Standard Generalized Markup Language.

Aunque el SGML pretende estandarizar el marcado, eliminar la confusión y ha inspirado tanto

al HTML como al XML, desciende de un lenguaje creado en los años sesenta. Es antiguo y,
por tanto, no se diseñó pensando en las aplicaciones web modernas.

HTML5 ha evolucionado y ya no se ajusta al SGML, sino que analiza con sus propias reglas.
Aunque sus orígenes siguen estando en el SGML, y HTML5 no es más que una extensión de
la tecnología existente, ya no se ajusta a esos estándares.

Uno de los resultados de esto es que el manejo de errores es mucho más indulgente ahora.
Un pequeño error ya no dará lugar a un problema evidente para los espectadores en su
página, o una página que no se carga en absoluto.

La semántica, o las etiquetas, también han mejorado drásticamente. Antes, la estructuración

de la página requería el uso constante de etiquetas <div>: <div id="header"> , <div
id="menu"> y <div class="post">.

En HTML5, esos códigos torpes serían <header> , <nav> y <article>. Estas etiquetas
son más limpias y tienen más capacidad de respuesta.

También se introdujeron varias etiquetas nuevas. Muchas de ellas se crearon para sustituir a
los divs y marcos que se utilizaban anteriormente para estructurar las páginas.

Muchas de las antiguas etiquetas de marcado no se modificaron en absoluto, por lo que

HTML5 es parcialmente compatible con versiones anteriores. Pero un documento HTML4 sin
modificar ya no se analizará correctamente con los nuevos estándares.
Aunque hay bastantes diferencias entre HTML y HTML5, los cambios son en general para
mejor y pretenden hacer más accesible el lenguaje de marcado.

Mejor rendimiento y soporte móvil

Una de las mayores ventajas de HTML5 es que es mucho más rápido y receptivo que las
iteraciones anteriores. En la época del HTML original, los dispositivos que no eran
ordenadores para acceder a Internet ni siquiera eran un sueño; ahora, todo es accesible
desde nuestros teléfonos, relojes y televisores, gracias en parte a la velocidad del HTML5.

La nueva versión ha traído mejores normas para que los sitios web funcionen con mayor
fluidez en dispositivos más pequeños y menos potentes. Muchos problemas de rendimiento
seguirán dependiendo de ti y de la calidad de tu código. Sin embargo, con la actualización de
HTML5 se han atado muchos cabos sueltos en la parte de HTML.

Por ejemplo, HTML5 admite el multithreading con los Web Workers de JavaScript, lo que
permite que el procesador de tu dispositivo utilice más potencia para ejecutar los scripts. El
código que solía atascar una página ahora se ejecutará sin problemas.

El diseño de sitios web con capacidad de respuesta también es mucho más fácil en HTML5.
En HTML4 se sustituyeron muchos elementos no responsivos, como los divs, por etiquetas
de estructura que funcionan mejor en los móviles.

Los marcos también fueron eliminados por causar problemas de usabilidad y accesibilidad.
Aunque todavía se admiten, han quedado obsoletos y no deben usarse a menos que tengas
motivos para trabajar con tecnología obsoleta.

Aunque no hay un reemplazo directo en HTML5 para los marcos, se recomienda utilizar
elementos CSS como las cajas flexibles o los iframes (que siguen siendo compatibles con
HTML5) para sustituir la antigua funcionalidad.

Mejores controles de formularios

Los nuevos controles de formularios equivalen a un nuevo nivel de control sobre tu sitio.
Aunque pueda parecer una característica pequeña, significa tener que depender de una
tecnología externa menos para crear un formulario que funcione.

— Ejemplo de formulario HTML 5

Originalmente, HTML sólo admitía los tipos de entrada de texto, contraseña, oculto, casilla de
verificación/radio y carga de archivos. Aunque eso es suficiente para crear un formulario de
entrada básico, ahora se pueden hacer muchas más cosas con los tipos de entrada de
HTML5.

Las nuevas incorporaciones incluyen correo electrónico, número de teléfono, URL, cuadro de
búsqueda, deslizador, numérico, selector de fecha y hora y selector de color.

Esta diversa gama de tipos de entrada le permite crear mejores formularios que pueden
aceptar más tipos de contenido, con validación incluida para asegurar que son correctos.
Consulta la lista completa de entradas HTML para obtener más información.

Almacenamiento en la web

En lo que respecta al almacenamiento web, HTML4 y las versiones inferiores admiten

esencialmente cookies y poco más. Almacenar cualquier información, aparte del seguimiento
básico del usuario, en una diminuta cookie de 4 kilobytes era casi imposible.

Por otro lado, el almacenamiento local permite guardar entre 5 y 10 megabytes de datos,
dependiendo del navegador. Esto permite guardar información del cliente sobre sesiones
anteriores, datos de acceso sin conexión, personalizaciones, etc. Además, el
almacenamiento local no se borra automáticamente, a diferencia de las cookies.

— Modo oscuro activado en el personalizador de WordPress

Un ejemplo de lo que puede hacer con el almacenamiento local es guardar la preferencia de

un usuario por el tema claro u oscuro en tu sitio, asegurándose de que siga viendo tu sitio
como lo prefiere en su próxima visita. Aunque también se puede guardar las preferencias del
usuario con cookies, el navegador las borrará inevitablemente después de un tiempo.

HTML5 admite el almacenamiento local a través de la API de almacenamiento web. Además,

admite el almacenamiento en bases de datos Web SQL, el almacenamiento en bases de
datos indexadas e incluso el acceso a archivos con la API de archivos. Muchos de ellos se
integran con JavaScript a través de las API. Antes de eso, era extremadamente engorroso
hacerlo o, en algunos casos, simplemente no era posible o era extremadamente engorroso
hacerlo.

¿Qué es mejor? ¿HTML o HTML5?

Si quieres aprender a codificar, deberías evitar definitivamente el uso de estándares
obsoletos. HTML5 es la versión más reciente de HTML y debería utilizarse siempre por
encima de las versiones más antiguas del lenguaje.

Como ya se ha dicho, HTML5 mejora varios aspectos de HTML4 que estaban obsoletos y
eran difíciles de trabajar. Además, HTML5 puede hacer muchas cosas de forma nativa,
mientras que HTML4 depende por completo de sistemas que hace tiempo que están en
desuso, como Silverlight, Java Web Start y Flash.

Aunque HTML5 no siempre se muestra correctamente en navegadores y sistemas operativos

superantiguos (como Internet Explorer o las versiones antiguas de los teléfonos móviles),
estas plataformas están muy desfasadas y ya no se utilizan. Ya no hay buenas razones para
utilizar versiones anticuadas de HTML en lugar de los estándares modernos.

Por desgracia, hay mucha información en Internet y en libros sobre versiones antiguas de
HTML. Siempre que busques una guía o aprendas de un curso o libro, asegúrate de que
habla de HTML5 y de que fue publicado o actualizado después de 2014. No sirve de nada
aprender estándares anticuados de 1999.

Cómo convertir HTML en HTML5

Si tienes un sitio web antiguo, necesitas actualizarlo. Lamentablemente no hay una forma
real de hacer una conversión total sin hacer ningún trabajo manual.

Lo mejor que puedes hacer es leer la especificación de HTML5 (o hacer un curso de HTML si
eres totalmente nuevo en el lenguaje) y familiarizarte con los cambios. Después, puedes
reescribir el código y añadir las nuevas características que han añadido en HTML5.

Consulta esta guía para migrar de HTML4 a HTML5. Cubre ampliamente los cambios
manuales que necesitas hacer en el código.
También puedes probar este convertidor de XHTML a HTML5, pero asegúrate de repasar tu
código manualmente o introducirlo en un validador antes de importarlo a un sitio en vivo.

Por suerte, HTML5 es en su mayoría contenido nuevo. Hay algunas etiquetas obsoletas que
tendrás que reemplazar, pero aparte de eso, actualizar el código no suele ser un gran
esfuerzo a menos que tu sitio dependa en gran medida de tecnología obsoleta como los
marcos.

Resumen
HTML y HTML5 son dos partes de la misma tecnología, aunque significan cosas ligeramente
diferentes. HTML se refiere al lenguaje de marcado en su conjunto, a menudo a la versión
más reciente, mientras que HTML5 es la última actualización del mismo.

Si quieres aprender HTML, es importante que utilices la última edición: HTML5. Es mejor en
todos los sentidos, y aunque signifique tener que convertir un montón de código antiguo
manualmente, definitivamente vale la pena el esfuerzo.

HTML5 tiene ya varios años, y como norma viva del lenguaje en su conjunto, sólo seguirá
actualizándose para funcionar con la web moderna.