¿Cuáles son las novedades que ofrece HTML 5.1?

Sin HTML (“Hypertext Markup Language”, en español “lenguaje de marcas de hipertexto”), Internet no sería lo mismo, y es que este lenguaje de marcado sirve para estructurar textos, imágenes o enlaces y se erige como la base de la World Wide Web. No obstante, Internet ha cambiado con el paso del tiempo y los contenidos multimedia se han convertido en un factor de gran relevancia en el diseño web, ya que, tanto el contenido audiovisual como la representación móvil de dichos contenidos, tienen cada vez más importancia. Tras varios años de estancamiento, el World Wide Web Consortium (W3C) y el Hypertext Application Technology Working Group (WHATWG) se pusieron manos a la obra para seguir desarrollando el lenguaje de marcado HTML con el objetivo de hacer frente a los cambios introducidos tanto por los diseñadores web como por los usuarios. Desde el otoño de 2014 se puede hablar de un nuevo HTML. Con HTML5, concepto que ya te presentábamos en nuestro artículo, se pueden integrar muchos contenidos de manera sencilla. Un gran número de acciones y de plugins se han quedado obsoletos, pero con HTML 5.1 se ha introducido la próxima actualización. Sin embargo, ¿cómo se lleva a cabo el proceso hasta que se publica una nueva actualización de HTML? Y, ¿cuáles son las novedades más importantes de las actualizaciones actuales? ¿Qué características se van a convertir en el nuevo estándar y qué significado tiene esto para los gestores de páginas web?

La última vez tuvieron que pasar 15 años para que se publicara un nuevo HTML tras la versión 4.01. Esta vez, sin embargo, ha ocurrido con mayor rapidez. Casi dos años después de que HTML5 viera la luz, ya se puede disfrutar de la primera actualización con HTML 5.1, con la cual tanto W3C como WHATWG reducen el intervalo entre actualizaciones. En una época en la que Internet se desarrolla a pasos agigantados, esta es una consecuencia tan lógica como importante.

Para la actualización de HTML5 se elaboraron los primeros esbozos (“Working Drafts”) en diferentes grupos de trabajo y se nominaron las primeras características HTML a modo de lista de candidatos (“Candidate Recommendation” o CR). En el marco de una fase de prueba detallada tiene que probarse la viabilidad de estos elementos y una vez ha finalizado dicha fase de prueba, se procede a la publicación de una recomendación oficial del estándar (“Recommendation”).

En el caso de HTML 5.1, este proceso tiene lugar en un estrecho diálogo con la comunidad online, por lo que es así como W3C ha hecho público el desarrollo del nuevo HTML en GitHub. De esta forma, la comunidad tiene, ahora más que nunca, la posibilidad de familiarizarse de forma intensiva con el nuevo estándar y de obtener feedback fácilmente. GitHub es un servicio de gestión de versiones para proyectos de software y recoge gran cantidad de proyectos de código abierto. De este modo, los trabajos de numerosos desarrolladores pueden llevarse a cabo de manera automatizada en un software de libre acceso e igualmente en el caso de HTML 5.1.

HTML 5.1 presenta algunas novedades, aunque en general, ya están soportadas por todos los navegadores. El núcleo de estas novedades hace referencia a la adaptación de los contenidos multimedia al diseño web responsivo. En este sentido, el problema era, hasta ahora, la visualización de las imágenes ante el cambio de resolución, para el cual debía convertirse en estándar, ya con HTML5, el contenedor <picture>, algo que en su momento no fue posible. Independientemente de que este elemento no hubiera sido elevado a estándar oficial con la introducción de HTML5, los desarrolladores lo continúan usando a pesar de todo. Entretanto, los navegadores habituales tienen la capacidad de entender el elemento <picture> y la estandarización con el nuevo HTML también lo hace oficial.

El elemento <picture> hace referencia a un contenedor en el que, por medio de diferentes elementos fuente (source), se pueden incluir archivos de imagen. En este sentido solo se cargan las fotos adecuadas en función del tamaño de la pantalla y de la resolución de la misma, lo que permite ahorrar tiempos de transmisión y beneficia a la gestión móvil de la página web. En función del ancho de banda, también se pueden facilitar contenidos alternativos para pantallas de alta resolución, pero para ello resulta necesario recurrir al atributo <srcset>. Este establece la conexión entre las imágenes y los diferentes tamaños.

En el siguiente ejemplo, que a su vez es una traducción del ejemplo que aparece en la página web SelfHTML y que también incluye un fallback, podemos ver el aspecto que puede tener dicha integración con <img>.

<picture>

<source media="(min-width: 1024px)" srcset="https://www.ionos.com/es-us/digitalguide/bomberos-1600.jpg">

<source media="(min-width: 480px)" srcset="https://www.ionos.com/es-us/digitalguide/bomberos-480.jpg">

<!---Fallback---> <img src="https://www.ionos.com/es-us/digitalguide/bomberos-480.jpg" srcset="https://www.ionos.com/es-us/digitalguide/bomberos-320.jpg" alt="Festividad de los bomberos 2014">

</picture>

El elemento <picture> y <srcset> van, en cierto sentido, de la mano. Aun cuando las últimas y más novedosas versiones de los navegadores soportan ambos, en el caso de los navegadores más antiguos, el fallback garantiza que el gráfico siempre se muestre de manera correcta. Los elementos source solo definen los requisitos relativos a las características de la pantalla, tales como la anchura y la densidad de píxeles.

Con HTML5 se introdujeron nuevos valores para el elemento <input>. En este sentido se puede hablar de email, url o date, que permiten que el usuario introduzca los datos relativos a las direcciones de correo electrónico, los URL o la fecha. El tipo de campo de entrada viene definido por el elemento <input> en lugar de por los atributos type. Con las variables type =“month” y type =“week” también se pueden seleccionar, además de días y horas, meses y semanas, característica soportada por los principales navegadores. De esta manera, puede concebirse la estandarización con HTML 5.1 como una secuencia lógica.

Debido a la recomendación del W3C de que se implementara una nueva característica de HTML para al menos dos navegadores independientes durante la fase de prueba, algunos candidatos se quedaron en el aire. En el momento de su nombramiento, recibieron la denominación de “at risk” (en español, “en peligro”), debido a que todavía no habían sido incluidos entre el gran número de navegadores y/o de desarrolladores para llevar a cabo la estandarización. 

Menos extendida que el elemento <picture> está, por ejemplo, la etiqueta <dialog>. En la actualidad está soportada por navegadores basados en Chromium, como, por ejemplo Chrome u Opera, de ahí que las opiniones vertidas poco antes de la publicación de HTML 5.1 sean un tanto divergentes: algunos artículos informan de una estandarización, pero por el contrario, en la página oficial de W3C se indica que la etiqueta <dialog> ha sido eliminada. Y con esta etiqueta, de hecho, debería resultar mucho más sencilla la integración de ventanas emergentes, es decir, de cuadros de diálogo, pues normalmente se necesita más código JavaScript. A la hora de abrir y cerrar era cuando solían surgir las dificultades. Aquellos navegadores que (todavía) no soportan la etiqueta <dialog>, es probable que tengan problemas a la hora de mostrar las ventanas y también al cerrarlas. Esta etiqueta da cabida a contenidos que no se pueden modificar y esto hace referencia tanto al texto plano de los formularios como a las imágenes.

Además del elemento <dialog>, <keygen> y <menu> también formaban parte de la lista negra del nuevo HTML. Sin embargo, estos dos últimos elementos, según el consorcio W3C, fueron “conservados”. A estos también hay que sumar los elementos <menuitem> y el atributo contextmenu. Tanto con los elementos como con los atributos se pueden crear barras de herramientas y menús contextuales tal y como se les conoce de las aplicaciones de escritorio. Sin embargo, por el contrario, se suprime el tipo de barra de herramientas para el elemento <menu>.

El elemento <keygen> también deja patente una suerte muy cambiante: el generador para pares de claves criptográficas fue desarrollado originariamente por Mozilla. Sin embargo, debido a que Microsoft no tenía ningún interés en implementarlo, Google presentó una solicitud en julio de 2015 para eliminarlo del estándar. De esta manera, no es sorprendente que la marca estuviera en riesgo. La recomendación del consorcio W3C para HTML 5.1 hecha en septiembre de 2016 incluyó dicho elemento de manera provisional, haciendo referencia a su estado en “proceso de eliminación”, lo que podía tardar varios años y significa que, a corto o medio plazo, se alejará del estándar. No se recomienda, por tanto, el uso de dicho elemento.

Los administradores de páginas web pueden utilizar los elementos y atributos del nuevo HTML sin ningún tipo de problemas y, como se ha expuesto al principio, esto es algo que ya hacen muchos de ellos. La lista “at risk”, las cancelaciones y las estandarizaciones oficiales están consideradas igual de bien: si hasta ahora se han utilizado las etiquetas y los atributos incluidos en la lista “at risk”, es recomendable reflexionar sobre el modo de transformar el propio proyecto. Un nivel de compatibilidad alto para el máximo número de navegadores y terminales posible debería convertirse, hoy más que nunca, en el objetivo final de todo gestor de páginas web.

En el futuro, también es conveniente que los webmasters echen un vistazo a la página oficial del consorcio W3C: tras la finalización de HTML 5.1, también se planificó la versión 5.2. Así, ya está disponible un primer borrador que recoge los cambios correspondientes, por lo que con el nuevo HTML parece aumentar considerablemente el ritmo de las actualizaciones. Para los gestores de páginas web esto significa que, por un lado, se reacciona con una mayor rapidez a los bugs y que, por otro, la adaptación a las exigencias continuas también se produce con mayor celeridad. Asimismo, con la publicación de HTML 5.1 a través de GitHub, existe la posibilidad de que los desarrolladores participen de manera activa en el proceso de mejora.