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>
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?
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.
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.
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.
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.
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.
Deja una respuesta