La llegada de HTML5 ha revolucionado el mundo del diseño y desarrollo Web. De la mano de nuevas características y renovación de opciones ya existentes, esta nueva versión es una evolución necesaria para la Web.
El elemento details de HTML5 nos permite definir un conjunto de información que se estará oculta para el usuario, por defecto, pero que podrá ser mostrada si el usuario hace clic.
Por lo general la veremos trabajando con la etiqueta <summary>, que actuará como el texto visible. Veamos un ejemplo a continuación para entender mejor su funcionamiento:
<details> <summary>Licencia de uso</summary> <p>Este material pertenece a Damián bajo licencia Creative Commons</p> <p>Para utilizar este material, consultar al autor.</p> </details>
En el código HTML tenemos la etiqueta <details> conteniendo <summary> y dos párrafos (<p>). Está claro que la estructura y los textos pueden variar a lo ejemplificado, pero la idea es comprender la estructura básica.
¿Simple, verdad? Ahora veamos el ejemplo en acción (importante: solo lo veremos funcionando en los navegadores compatibles):
Licencia de uso
Este material pertenece a Damián bajo licencia Creative Commons
Para utilizar este material, consultar al autor.
En conclusión
El elemento details de HTML5 es una característica interesante, dentro de muchas opciones nuevas que han llegado de la mano de esta revolución en el mundo Web. Si bien su uso puede parecer muy específico, si llevamos tiempo creando sitios, seguramente alguna vez nos encontramos con la necesidad de incluir esta característica y tuvimos que recurrir a soluciones de la mano de JavaScript o de alguna librería.
Está claro que existen otras funcionalidades que han tenido mayor difusión, pero conocer la «caja de herramientas» que ha llegado de la mano de HTML5 nos permite tener un mayor abanico de opciones a la hora de crear sitios o aplicaciones Web.
Para finalizar, siempre que comencemos a aplicar una característica nueva en nuestros proyectos, es fundamental verificar su compatibilidad con diversos navegadores, para asegurarnos que la experiencia de usuario sea óptima y no se encuentre con dificultades para utilizarla.
Para conocer más sobre esta etiqueta y su compatibilidad con diversos navegadores podemos consultar la documentación y ejemplos ofrecidos por MDN.