La etiqueta details de 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>

A continuación vemos el ejemplo en acción (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 Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

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 un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.