HTML es conocido por todos por ser el lenguaje de modelado de la información de la web. Mediante el uso de etiquetas podemos construir el esquema de un sitio web. A pesar de que, hoy en día existen muchas tecnologías para trabajar con componentes, el paso final siempre está construido en archivos HTML pues es este el único lenguaje que conoce el navegador en cuanto a estructura de sitios. Como bien sabes también conoce CSS cuando hablamos de estilos y JavaScript cuando hablábamos de interactividad y digo hablábamos porque hoy en día JavaScript se ha convertido en más que eso gracias a las diferentes contribuciones en forma de librerías y frameworks como las que hablábamos para crear componentes hasta incluso ver código JavaScript en el lado del servidor, de la mano de Node.JS.

Desde Diciembre tenemos reconocido por la W3C la versión 5.2 de HTML, y podemos ver en el sitio web oficial la totalidad de los cambios que vamos a ir viendo a lo largo de este tutorial.

Sin duda, el paso de HTML4 a HTML5 supuso una revolución, con la introducción de nuevas etiquetas y una adaptación a la web de la época, pero que a pesar de ello necesita ser mínimamente reformada de vez en cuando. Creo que es importante que revisemos las novedades de esta versión pues tal como indica su numeración son un avance de la mencionada no comparable en términos de importancia a la transición mencionada pero con elementos muy destacables que veremos el día de hoy.

Novedades en HTML 5.2

Nueva etiqueta: <dialog>

Seguro que si has trabajado alguna vez con modales recuerdas el trabajo que cuesta tener que crearlos por tu cuenta y ya ni te cuento si necesitas trabajar con ellos dinámicamente, es decir, usando Javascript. Al final, cuando estás en un proyecto en el que los modales no son lo fundamental terminas usando una librería de terceros que aumenta el tiempo de carga de tu sitio.

Gracias a la nueva etiqueta <dialog> tendrás modales por defecto en HTML sin ningún tipo de problemas. Si deseas que este esté abierto por defecto tendrás que añadir el parámetro open resultando algo similar a <dialog open>.

Con JavaScript, gracias a la introducción de esta etiqueta tendremos nuevos métodos llamados open() y close() que nos permitirán trabajar con el modal, abriendo y cerrando este.

Aquí tenemos un ejemplo de como controlar lo mencionado en JavaScript.:

const dialog = document.getElementById('mybeauty-dialog');

dialog.open(); // Abre el diálogo
dialog.close(); // Cierra el diálogo

Permitido el uso del Payment Request API en iframe

Como bien sabes si has trabajado con pagos, la API mencionada te ayuda a validar los formularios relacionados con acciones de esta índole
Por ejemplo, si tienes un input para introducir el número de tarjeta, este se asegurará de que el número tenga 16 dígitos o que, por ejemplo no escribas 6 dígitos en el CVV(suelen ser 3 dígitos y en las AMEX 4).

Con esta API trabajamos sin problemas cuando tenemos nuestro propio formulario pero el problema aparece cuando usamos un iframe bien porque usemos un servicio de un tercero o porque tengamos la solución implementada de esta manera. Esta nueva versión de HTML nos trae consigo un nuevo atributo llamado allowpaymentrequest para añadir a las etiquetas <iframe>, de manera que podamos hacer uso de nuestra API.

Parámetro sizes para los iconos del Head

Cuando estamos definiendo los metadatos de nuestra aplicación nos encontraremos en más de una vez que los iconos para la app necesitamos crearlos en diferentes tamaños(por ejemplo en el caso de los destinados a dispositivos de Apple, que requieren varios tamaños) . Con esto nos viene a ayudar la nueva versión de HTML 5.2 y un nuevo parámetro size que nos permitirá definir el tamaño del icono siguiendo la estructura WxH:

<link rel="icon" size="16x16" href="/pictures/icon.jpg" />

Modificaciones en HTML 5.2.

Múltiples <main> en un documento

Desde ahora, podemos crear varios <main>, dentro de un mismo archivo. Esto surge de la necesidad que tienen las Single Page Applications para mostrarse. Aún así deberemos de tener claro que sólo uno podrá ser mostrado, por tanto deberemos de ocultar el resto de ellos. De lo contrario no funcionará como esperamos.

Una manera de ocultarlo es aplicándole un display:none, como vemos en este ejemplo:

<main></main>
<main style="display:none;"></main>

<style> en el body

Esta etiqueta, que nos ayuda a definir estilos, solo se podía usar desde un principio en el Head, ya que es dónde se trabaja todo el tema de CSS. Desde ahora podemos hacerlo dentro del body de manera que podemos colocar nuestros estilos junto a los elementos que correspondan.

<body>
  <style>
    #blue {
      background: blue;
    }
  </style>
  <div id="blue">
    <p>Hi, I'm a blue box</p>
  </div>
</body>

Sin duda esto no significa que debamos escribir nuestros estilos en el body pues, es recomendable tenemos en un fichero CSS aparte y tenerlos llamados en el <head>, basando estos fundamentos en términos de optimización.

Los <legend> pueden llevar encabezados dentro de ellos

Desde ahora, para añadir texto a un legend podrás añadir cualquier tipo de etiqueta de texto(<h1>, <h2>...) dentro de este.

¡Hasta ahora, doctypes antiguos!

Con esta versión de HTML decimos adiós a los Doctype de XHTML 1.0 y de HTML 4.0, así que, probablemente esta sea la única vez que veas estos encabezados:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Conclusiones finales

La nueva versión de HTML trae consigo novedades interesantes y por parte de la W3C es importante que cada cierto tiempo salgan actualizaciones pues aunque sean mínimas debemos de ir adaptando el lenguaje a las necesidades e irlo haciendo lo más fácil para cualquier nuevo programador. Hemos estado viendo que esta versión quiere ser amigable con los creadores de SPA que cada vez son más así como el hecho de querer simplificar el desarrollo que debe de realizar un programador para cosas en algunos casos tan usadas como un modal.