HTML details

La etiqueta <details> de HTML5 es un elemento de contenedor utilizado para proporcionar una forma de mostrar y ocultar contenido adicional en una página web. El contenido se oculta detrás de un resumen o título que se puede hacer clic para mostrar el contenido.

El uso típico es para mostrar una descripción detallada, una lista de elementos o cualquier otro contenido adicional que no sea esencial para el contenido principal de la página.

Ejemplo de uso

Aquí tienes un ejemplo de cómo se utiliza la etiqueta <details> en HTML:

<details>
  <summary>Más información</summary>
  <p>Aquí se encuentra la información adicional</p>
  <ul>
    <li>Detalle 1</li>
    <li>Detalle 2</li>
  </ul>
</details>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se usa la etiqueta <summary> para proporcionar un título o resumen del contenido adicional.

El contenido adicional se encuentra dentro de la etiqueta <details> y puede incluir cualquier tipo de elementos HTML. Al hacer clic en “Más información” se desplegará el contenido adicional y al hacer clic de nuevo se ocultará.

Atributos

La etiqueta <details> de HTML5 solo tiene un atributo opcional:

• open: Especifica si el contenido dentro de la etiqueta <details> es visible al cargar la página. Si el atributo está presente, el contenido se mostrará de forma predeterminada, si no está presente el contenido estará oculto y se tendrá que hacer click en el título para mostrarlo.

Ejemplo:

<details open>
  <summary>Más información</summary>
  <p>Aquí se encuentra la información adicional</p>
  <ul>
    <li>Detalle 1</li>
    <li>Detalle 2</li>
  </ul>
</details>

Lenguaje del código: HTML, XML (xml)

En este ejemplo el atributo “open” está presente, por lo cual al cargar la página el contenido adicional se mostrara automáticamente.

Es importante mencionar que esta etiqueta es soportada en los navegadores modernos, pero algunos navegadores antiguos pueden no tener soporte para ella.