Características útiles nuevas
Éstas son las últimas grandes novedades del lenguaje HTML5, e ideas de cómo se pueden implementar en trabajos de desarrollo web
-
Definir múltiples imágenes para el diseño responsive
Esta versión nos ofrece la posibilidad de utilizar el tag picture, junto con el atributo srcset para poder definir múltiples imágenes para el diseño responsivo. Podríamos definir este tag como un contenedor de imágenes donde los diseñadores podrán declarar varias, que se utilizarán dependiendo del tamaño de pantalla, píxeles u otros parámetros. Por sí solo este tag no muestra nada, y para que funcione deberíamos establecer una imagen por defecto utilizando la etiqueta img habitual. Las imágenes alternativas se ubicarían
dentro de los atributos srcset de los elementos img y source. Este código nos mostrará
la imagen por defecto mientras que el tamaño de la pantalla sea superior a los 960 px. Cuando sea menor, se mostrará large.jpg, y si es inferior a 360 px se verá "mobile.jpg". -
Mostrar o esconder información extra
En este caso utilizaremos las nuevas etiquetas details y summary. Mediante su uso podemos añadir información extra a cualquier contenido. Su principal característica es que la información no se muestra por defecto, pero si el usuario está interesado tendrá la opción de consultarla. Para utilizarla debes colocar el tag summary dentro de details. En el interior de summary será donde pondremos la información visible, que tendrá un icono a su izquierda para mostrar la información oculta.
-
Añadir funciones al menú contextual del navegador
Esta versión de HTML 5 permite añadir nuevas funciones al menú contextual del navegador. Para ello hay que utilizar el tag menuitem y su atributo type=context. Para
su uso hay que asignar esa etiqueta como elemento hijo del tag menu, al que habrá que definir el atributo id, que tendrá así el mismo valor que el atributo contextmenu del elemento que queremos añadir al menú contextual. El tag menuitem puede ser de tres tipos diferentes: checkbox, command y radio. Si se ejecuta el código anterior, aparecerá un botón. Si sobre él se pulsa con el botón derecho, aparece la nueva opción en el menú. -
Anidar headers y footers
HTML 5.1 ofrece la posibilidad de anidar varios headers y footers, siempre y cuando cada nivel esté dentro del contenido de la sección. Útil para crear cabeceras elaboradas.
-
Utilizar imágenes con un ancho de 0 píxeles
Otra de las novedades que incluye esta nueva versión es la posibilidad de utilizar imágenes que tengan un valor de 0 píxeles de ancho. Esto es muy útil a la hora de incluir fotografías que no queremos que sean vistas por los usuarios, como pueden ser archivos de trackeo. Lo que sí se recomienda es que se utilice el atributo alt vacío.
-
Crear opciones vacías
Otra de las cosas que no se podía utilizar hasta la fecha era crear un elemento option vacío. Este elemento suele ser utilizado conjuntamente con otras etiquetas como select, optgroup o datalist. Puede ser útil en aquellos casos en los que no queremos sugerir qué opción deben seleccionar los usuarios.
