La etiqueta details de HTML5

HTML5

La etiqueta <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 <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 css3html5.com.ar bajo licencia Creative Commons</p>
<p>Para utilizar este material, consultar a sus respectivos autores.</p>
</details>

¿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 css3html5.com.ar bajo licencia Creative Commons

Para utilizar este material, consultar a sus respectivos autores.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

3 Comentarios en “La etiqueta details de HTML5
  1. Alexander dice:

    Hola muy interesante y ahora como se le da estilo a la etiqueta Details ?

  2. Javi dice:

    Buenas recientemente e iniciado una petición en change.org para que añadan estas etiquetas en todos los navegadores web para que hagamos un poco de fuerza y las integren, si alguien desea echar una mano que la firme.Saludos y gracias de antemano

    https://www.change.org/p/mozilla-microsoft-apple-opera-integrar-los-elementos-details-y-summary-de-html5-en-todos-los-navegadores

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*



Encontrame en las redes sociales. Contactame.