La diferencia entre HTML y HTML5

HTML, por sus siglas en inglés de HyperText Markup Language, es el lenguaje de marcado más utilizado para crear páginas y aplicaciones web. Comprende elementos y etiquetas predefinidas para etiquetar piezas de contenido y describir la estructura de las páginas.

Repasaremos la diferencia entre HTML y HTML5, así como las ventajas de HTML5 para desarrolladores y usuarios finales. Además, responderemos a las preguntas más frecuentes sobre HTML5 y proporcionaremos una hoja de trucos o cheat sheet de HTML5 para facilitar el proceso de aprendizaje.

Empecemos.

Descarga la hoja de trucos HTML definitiva

¿Qué es HTML?

El lenguaje de marcado de hipertexto (HTML) es el lenguaje principal de la World Wide Web. Permite a los desarrolladores diseñar la forma en que los elementos de la página web, como el texto, los hipervínculos y los archivos multimedia, se muestran en el navegador.

HTML 5.2, actualizado en 2017, es la última versión de HTML.

El lenguaje HTML utiliza varias etiquetas, como de encabezados, tablas y párrafos, para definir las estructuras de texto de una página. Cada etiqueta se identifica con la fórmula <A> y </A>. Suelen llamarse etiquetas de “apertura” y “cierre”, respectivamente.

Por ejemplo, si quieres cambiar un estilo de texto específico a cursiva, puedes utilizar <i>escribe tu texto aquí</i>. Tu navegador renderizará el contenido a través de estas etiquetas y lo mostrará en la pantalla.

Este lenguaje funciona de forma estática, lo que significa que no se puede crear una función de página web dinámica o interactiva con HTML. Sólo modifica los elementos estáticos de una página web, como el encabezado del contenido, el pie de página, la posición de las imágenes, etc.

Para crear una página web atractiva e interactiva, hay que combinar HTML con al menos dos lenguajes de front-end: Cascading Style Sheet (CSS) y JavaScript.

HTML vs HTML5: ¿Cuáles son las principales diferencias?

Tanto HTML como HTML5 son lenguajes de marcado de hipertexto, utilizados principalmente para desarrollar páginas o aplicaciones web. HTML5 es la última versión de HTML y admite nuevas funcionalidades del lenguaje de marcado, como multimedia, nuevas etiquetas y elementos, así como nuevas API. HTML5 también admite audio y vídeo.

HTML	HTML5
El HTML no proporciona soporte nativo de audio y vídeo	El HTML5 proporciona soporte nativo de audio y vídeo
El HTML sólo es compatible con los gráficos vectoriales si se utiliza junto con otras tecnologías como Flash, VML (Vector Markup Language) o Silverlight.	HTML5 es compatible con SVG (Scalable Vector Graphics), canvas y otros gráficos vectoriales.
HTML permite el MathML y el SVG en línea en el texto con un uso restringido.	HTML5 te permite utilizar MathML y SVG inline en el texto.
El HTML no permite a los usuarios dibujar formas como círculos, triángulos y rectángulos.	HTML permite a los usuarios dibujar formas como círculos, triángulos y rectángulos.
El HTML sólo utiliza la caché del navegador y las cookies para almacenar datos temporalmente.	HTML5 utiliza las bases de datos SQL de la web, el almacenamiento local y la caché de la aplicación para almacenar los datos temporalmente.
El JavaScript y la interfaz del navegador se ejecutan en el mismo hilo.	El JavaScript y la interfaz del navegador se ejecutan en hilos separados.
Declaración de tipo de documento más larga.	Declaración de tipo de documento más corta.
Declaración de codificación de caracteres más larga. Utiliza el conjunto de caracteres ASCII.	Declaración de codificación de caracteres más corta. Utiliza el conjunto de caracteres UTF-8.
Compatible con casi todos los navegadores.	Sólo es compatible con los navegadores más recientes, ya que hay muchas etiquetas y elementos nuevos que sólo admiten algunos navegadores.
Construido sobre la base del Lenguaje de Marcado Generalizado (SGML).	HTML5 ha mejorado las reglas de análisis sintáctico proporcionando una mayor compatibilidad.

Además de las características de la tabla anterior, HTML5 ha experimentado los siguientes cambios:

• Se han eliminado algunos elementos, como isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike y tt.
• Nuevos tipos de controles de formulario, incluyendo fechas y horas, correo electrónico, número, rango, tel, url, color y búsqueda.
• Hay múltiples características y elementos que incluyen el vídeo, la navegación, el apartado, el progreso, canvas, la sección, el contador y el tiempo.
• Nuevas API con diversas funcionalidades, como el soporte de arrastrar y soltar, la manipulación del historial del navegador y la lectura y bloqueo del estado de orientación de la pantalla.
• Nuevos atributos, como async, manifest, sandbox, srcdoc y reversed.
• Nuevos atributos globales, como hidden, role, spellcheck y translate.

Las principales ventajas de HTML5 para los desarrolladores

HTML5 se creó para mejorar la experiencia de la WWW y dar a los desarrolladores web más flexibilidad a la hora de diseñar sitios web. En esta parte del artículo, repasaremos las mejoras introducidas por la nueva versión.

Manejo de errores persistentes

La mayoría de los navegadores tienen soporte para analizar código HTML estructural o sintácticamente incorrecto. Sin embargo, hasta hace unos años, no había un proceso estandarizado para manejar esto.

Es decir, los desarrolladores de navegadores tenían que realizar pruebas de documentos HTML mal formados en diferentes navegadores para crear procesos de manejo de errores mediante ingeniería inversa.

El manejo consistente de errores en HTML5 ha supuesto una enorme diferencia en este sentido. Los algoritmos de análisis sintáctico mejorados que se utilizan en HTML5 tienen un beneficio incalculable en cuanto al ahorro de dinero y tiempo.

Semántica mejorada para los elementos

Se han introducido mejoras en los aspectos semánticos de varios elementos existentes en HTML para reforzar el significado del código.

Section, article, nav y header son los nuevos elementos que han sustituido a la mayoría de los elementos div, ahora obsoletos. Esto hace que el proceso de búsqueda de errores sea mucho menos complicado, ya que los elementos son más sencillos.

Soporte mejorado para características de aplicaciones web

Uno de los principales objetivos de HTML5 es permitir que los navegadores web funcionen como plataformas para aplicaciones. De este modo, ofrece a los desarrolladores un mayor control del rendimiento de sus sitios web.

En el pasado, los desarrolladores tenían que utilizar soluciones alternativas porque muchas tecnologías del lado del servidor y extensiones del navegador no estaban presentes.

En la actualidad, no es necesario emplear ninguna solución basada en JavaScript o Flash (como se hacía antes en HTML4) porque hay elementos en HTML5 que proporcionan todas las funcionalidades.

Más adaptado a la web móvil

El número de usuarios de teléfonos inteligentes ha crecido de forma continua en la última década, lo que ha creado la necesidad de mejorar los estándares HTML.

Los usuarios finales quieren acceder a los recursos web en cualquier momento a través de cualquier dispositivo móvil. En otras palabras, tener un sitio web adaptable es un requisito.

Por suerte, HTML5 ha simplificado mucho el soporte móvil al adaptarse a los dispositivos móviles electrónicos de baja potencia, como tablets y smartphones.

El elemento canvas

Una de las características más interesantes de HTML5 es el elemento <canvas> que permite dibujar diversos componentes gráficos, como cajas, círculos, texto e imágenes.

Sin embargo, cabe mencionar que el elemento <canvas> es simplemente un contenedor de gráficos. Por lo tanto, para definir los gráficos, hay que ejecutar un script. He aquí un ejemplo en el que se utiliza JavaScript junto con el elemento:

<canvas id=”TestCanvas” width=”200″ height=”100″></canvas>
var c = document.getElementById(“TestCanvas”);
var context = c.getContext(“2d”);
context.fillStyle = “#FF0000”;
context.fillRect(0,0,140,75);

El elemento menú

Los nuevos elementos <menú> y <menuitem> son componentes de la especificación de elementos interactivos.

Estos dos elementos pueden utilizarse para mejorar la interactividad de la web. La etiqueta <menú> representa un conjunto de comandos de menú a la manera de las aplicaciones móviles y de escritorio. Un posible uso de la etiqueta de menú es:

<body contextmenu=”new-menu”>
    <menu id=” new-menu” type=”context”>
    <menuitem>Hello!</menuitem>
    </menu>
</body>

Atributos de datos personalizados

Es posible añadir atributos personalizados a las versiones anteriores de HTML, pero es algo arriesgado. Por ejemplo, los atributos personalizados a veces pueden impedir que una página se renderice completamente en HTML4 y provocar documentos incorrectos o inválidos.

Afortunadamente, el atributo data-* de HTML5 ha puesto fin a este problema tan frecuente. Si bien existen múltiples usos para este atributo, como estilizar elementos CSS o acceder al atributo data de un elemento a través de jQuery, su objetivo principal es almacenar información adicional sobre los distintos elementos.

Ahora se pueden incluir datos personalizados, lo que ofrece a los desarrolladores la posibilidad de crear páginas web atractivas y eficientes sin tener que introducir complicadas peticiones del lado del servidor o llamadas Ajax.

Almacenamiento web para reemplazar las cookies

HTML5 usa el almacenamiento web o local para reemplazar las cookies. En la versión anterior de HTML, si los desarrolladores querían almacenar algo, tenían que hacer uso de las cookies, que contienen una pequeña cantidad de datos (alrededor de 4 kb).

Pero las cookies tienen varias desventajas: pueden caducar, restringen el uso de datos complejos (sólo permiten cadena de caracteres) y ralentizan el servidor web al cargarlo con scripts adicionales.

El almacenamiento web, en cambio, permite que los datos se guarden en el ordenador del cliente de forma permanente (a menos que el usuario los borre). También tiene un mayor almacenamiento de datos (al menos 5 MB) y no supone una carga adicional al solicitarlo al servidor.

Ventajas de HTML5 para el usuario final

HTML5 supone un cambio de paradigma tanto para los desarrolladores como para los usuarios finales. Algunas de las ventajas que proporciona a los usuarios finales son:

• Reduce las caídas en los navegadores móviles.
• Soporta elementos de audio y video nativos sin necesidad de ningún plugin adicional.
• Ofrece la geolocalización del usuario que navega por cualquier sitio o utiliza aplicaciones basadas en un navegador compatible con HTML5.
• Proporciona caché de aplicaciones sin conexión para que las páginas o aplicaciones web estén disponibles incluso cuando los usuarios no están conectados a una red.
• Ofrece formularios web mejorados con entradas de texto mejoradas, cuadros de búsqueda y diferentes campos para diversos fines.

¿Cómo de seguro es el HTML?

HTML5 es la versión más segura de HTML. Sin embargo, las aplicaciones y sitios construidos con HTML5 siguen siendo vulnerables a los ataques de seguridad.

Las amenazas de seguridad más comunes suelen venir en forma de código malicioso, que puede inyectarse a través de varios medios, como el error del desarrollador, los archivos de música, las imágenes, el código QR, los campos SSID o el marco de trabajo del middleware.

Desgraciadamente, no existe una solución única para construir un sitio o una aplicación web segura con HTML5. La seguridad del sitio o de la aplicación depende de lo cuidadoso y minucioso que sea el desarrollador web al crearlo.

Además, hay que entender las vulnerabilidades de la plataforma utilizada para construir su sitio web. Por ejemplo, los usuarios de WordPress deben entender las vulnerabilidades de seguridad del sistema de gestión de contenidos para asegurar sus sitios web de WordPress adecuadamente.

Estos son algunos consejos y trucos para mejorar la seguridad del sitio web:

• Mantén el software y los plugins actualizados. Las actualizaciones del software y de los plugins contienen mejoras de rendimiento y seguridad, incluyendo correcciones de errores y protección contra las últimas amenazas online.
• Deshazte de los plugins y archivos innecesarios. Los plugins y archivos innecesarios y obsoletos pueden servir para acceder al sitio web y desplegar amenazas de seguridad.
• Utiliza HTTPS y SSL. HTTPS y SSL proporcionan un mayor nivel de seguridad para un sitio web. HTTPS encripta las peticiones y respuestas HTTP, mientras que SSL crea una conexión segura entre el sitio web y el navegador para garantizar la seguridad de la información privada.
• Crea una política de contraseñas sólida. Crea una política de contraseñas que exija a los usuarios del sitio web la creación de contraseñas sólidas que consistan en una mezcla de letras, números y caracteres especiales.
• Elige un alojamiento web seguro. Busca un proveedor de alojamiento de confianza que ofrezca asistencia 24 horas al día, 7 días a la semana, y varias funciones, como servicios de copia de seguridad del sitio web, certificados SSL gratuitos y un alto índice de tiempo de actividad.
• Haz copias de seguridad del sitio web con frecuencia. Realizar copias de seguridad frecuentes del sitio web evita la pérdida de información importante en caso de una brecha de seguridad, ya que se puede restaurar simplemente el sitio web a partir de una copia de seguridad de la base de datos.
• Escanea el sitio web en busca de malware con regularidad. Varios tipos de malware pueden entrar en un sitio web a través de plugins u otros archivos. Realiza escaneos regulares de malware para librar al sitio web de estas amenazas de seguridad.
• Limita los intentos de inicio de sesión. Limita el número de intentos de inicio de sesión para evitar que los hackers prueben numerosas combinaciones de contraseñas.
• Gestiona el acceso de los usuarios. Sé estricto en el control de los accesos y permisos de los usuarios, asegurándote de que sólo las personas autorizadas puedan acceder a los archivos e información sensibles. Esto es especialmente importante para los sitios web con múltiples usuarios.
• Instala un cortafuegos de aplicaciones web (WAF). Un WAF filtra, supervisa y bloquea el tráfico HTTP malicioso que viaja a la aplicación. Puede activar la función de bloqueo de URL, impidiendo que las direcciones IP no autorizadas accedan a la página de acceso de un sitio web.

¿Puedo aprender HTML5 sabiendo HTML?

Aprender HTML5 es prácticamente lo mismo que aprender HTML, ya que HTML5 no es más que la nueva versión de HTML. Después de dominar una versión, escribir código utilizando otra versión de HTML no debería ser difícil.

Hoy en día, casi todo el mundo puede aprender HTML por su cuenta, lo que resulta aún más fácil gracias a los sitios web para aprender a codificar de forma gratuita.

Hoja de trucos de HTML5

Las hojas de trucos pueden ser una gran ayuda si estás empezando a aprender un nuevo lenguaje. Aquí incluimos la hoja que recopila las etiquetas HTML más utilizadas y las nuevas etiquetas HTML5.

Descarga la hoja de trucos de HTML completa en .pdf

¿Debo cambiar a HTML5?

Puede ser una buena práctica cambiar a HTML5. Una de las principales razones es que HTML5 ya ha sustituido a Flash para proporcionar contenido multimedia en varias plataformas.

Muchos nombres importantes de la industria han migrado de Flash a HTML5. Algunos ejemplos son Apple, Youtube y Google Chrome.

Aquí hay más razones para cambiar de Adobe Flash a HTML5:

• Adobe Flash es un software propietario. Las personas que lo utilicen estarán sujetas a restricciones o condiciones de licencia. HTML5, en cambio, es de código abierto y está desarrollado abiertamente por un grupo internacional.
• Problemas de seguridad y rendimiento. Los expertos han señalado que Flash es inseguro e inestable. Se ha convertido en una puerta de entrada para varios ataques de malware, y la forma en que se procesa el contenido de Flash también perjudica el tiempo de carga.
• Drena la batería. Ver contenido Flash en dispositivos móviles tiende a agotar la batería.
• Flash no es adecuado para los dispositivos táctiles. La tecnología Flash está diseñada principalmente para dispositivos de escritorio, no para dispositivos táctiles. Por ejemplo, muchas aplicaciones Flash se basan en el movimiento del ratón al pasar por encima, lo que es imposible en las pantallas táctiles.
• Adobe ha dejado de dar soporte a Flash Player. Adobe anunció que dejaría de dar soporte a Flash Player a partir del 31 de diciembre de 2020. Reconoce que los estándares abiertos, como HTML5, se han convertido en mejores alternativas y ya son utilizados por los principales proveedores de navegadores.

Para ayudarte a decidir si te pasas a HTML5, aquí tienes algunos pros y contras del uso de HTML5.

Pros

• Gratuito. No hay que pagar derechos de autor ni licencias por utilizarlo.
• Multiplataforma. Disponible en cualquier dispositivo -ordenadores, portátiles, smartphones- siempre que el navegador sea compatible con HTML5.
• Soporte nativo de audio y vídeo. HTML5 proporciona soporte de audio y vídeo sin necesidad de instalar software o aplicaciones adicionales.
• Puede potenciar el SEO. La naturaleza multiplataforma de HTML5 y las nuevas etiquetas HTML semánticas que ha introducido pueden mejorar el rendimiento SEO de un sitio web. Además, Google ha dejado de indexar el contenido de los sitios Flash o el contenido Flash de las páginas.
• Opciones de almacenamiento fiables. HTML5 permite el almacenamiento temporal de los datos del usuario en una base de datos SQL, eliminando la necesidad de cookies.

Contras

• Diferentes formatos de vídeo. No hay un formato de vídeo estándar definitivo para HTML5. Algunos ejemplos de formatos utilizados son H.264, WebM y Ogg. Diferentes navegadores soportan diferentes formatos de vídeo. Por ejemplo, Firefox admite WebM y Ogg, pero no H.264.
• No es compatible con los navegadores antiguos. Es posible que los usuarios que utilicen navegadores antiguos no puedan acceder correctamente a los sitios web HTML5. Algunas funciones recién añadidas en HTML5 sólo son compatibles con los navegadores modernos.
• Entrega inconsistente. A pesar de su naturaleza multiplataforma, el contenido de HTML5 puede ser reproducido de forma diferente según el tipo de navegador y dispositivo utilizado.
• Problemas de licencias de medios. Algunos códecs de vídeo contienen tecnología patentada, lo que significa que ciertos usos de estos formatos de vídeo están sujetos a derechos de autor para los propietarios de las patentes. Por ejemplo, los códecs H.264, ACC y MPEG-4 entran en esta categoría.
• No es ideal para el desarrollo de juegos. JavaScript es el único lenguaje de scripting de HTML5. Aunque es ideal para numerosas aplicaciones, puede ser deficiente para el desarrollo de juegos, especialmente cuando se trata de espacios de nombres personalizados, herencia o acceso a miembros.

Si quieres cambiar de Flash a HTML5, aquí tienes una breve guía paso a paso que debes seguir:

1. Prepárate para la transición. Esto puede incluir la auditoría de los activos y la decisión de qué añadir o cambiar, la creación de una lista de referencias cruzadas para seguir durante la conversión, y la determinación del calendario, las guías y las reglas de conversión.
2. Comprueba los archivos de origen. Busca y documenta los archivos de origen, asegurándote de que no falta nada.
3. Recoge los medios y el contenido. Extrae todos los medios y contenidos del sitio web de Flash para reutilizarlos o convertirlos para el sitio de HTML5.
4. Utiliza la herramienta de conversión adecuada. Hay muchas herramientas para la conversión de Flash a HTML5. Algunos ejemplos son Adobe Animate, OpenFL y Google Web Designer. Más adelante se explicará más.
5. Prueba el nuevo sitio web. Una vez completada la conversión, prueba el sitio web HTML5 en diferentes dispositivos y navegadores.

Los tipos de herramientas de conversión de Flash a HTML5 que debes utilizar dependen de los archivos que tengas.

Aquí tienes una breve descripción de cada herramienta:

• Google Web Designer. El editor web gratuito de Google para crear contenido web HTML5 utilizando una combinación de interfaz visual y de código. Es compatible con Windows, Mac y Linux.
• Adobe Animate. Software de autoría multimedia y animación por ordenador de Adobe. Es compatible con los objetivos de HTML5 y proporciona una ruta de migración para convertir aplicaciones y juegos Flash antiguos en HTML5.
• Zoë de CreateJS. Una aplicación de código abierto que forma parte de CreateJS, un conjunto de bibliotecas de JavaScript para crear contenido interactivo. Esta herramienta convierte las animaciones .swf en hojas de sprites.
• OpenFL. Un marco de software libre y multiplataforma que implementa la API de Flash. Escrito en el lenguaje de programación Haxe, el marco se utiliza a menudo para crear aplicaciones y juegos.

Conclusión

HTML es el lenguaje de marcas más utilizado para desarrollar páginas y aplicaciones web. HTML5 es la última versión de HTML.

En este artículo de HTML vs. HTML5, hemos hablado de las características clave que distinguen a HTML5 de sus predecesores y de otras nuevas como:

• Soporte nativo de audio y vídeo.
• Soporte de gráficos vectoriales sin plugins.
• Uso sin restricciones de MathML y SVG en línea en el texto.
• Soporte para la creación de formas.
• Uso de una base de datos SQL en lugar de cookies para el almacenamiento temporal de datos.
• El JavaScript y la interfaz del navegador se ejecutan en hilos separados.
• Declaración DOCTYPE de HTML más corta.
• Declaración de codificación de caracteres más corta y uso del conjunto de caracteres UTF-8.Reglas de análisis sintáctico mejoradas, ya que HTML5 no se basa en el Lenguaje de Marcado Generalizado Estándar.

Además de las funciones anteriores, HTML5 proporciona varios elementos, controles de formularios, atributos y API nuevos, especialmente beneficiosos para los desarrolladores y los usuarios finales.

Recomendamos a los usuarios de Adobe Flash que se pasen a HTML5. Aunque HTML5 tiene sus propios pros y contras, muchos nombres notables de la industria se han pasado a HTML5 debido a diversos problemas de seguridad y rendimiento.

Si utilizas Flash y quieres cambiar a HTML5, debes hacerlo con cuidado, utilizando las herramientas de conversión adecuadas, como Google Web Designer, Adobe Animate, Zoë de CreateJS y OpenFL.

Es fundamental que aprendas sobre HTML5 lo antes posible para aprovechar al máximo el potencial de los navegadores actuales. Esperamos que este artículo sobre la diferencia entre HTML y HTML5 sea de ayuda. ¡Mucha suerte!