HTML summary

La etiqueta <summary> de HTML5 se utiliza para proporcionar un resumen o título para un elemento <details>. Es una etiqueta de bloque que se utiliza dentro del elemento <details> para proporcionar información adicional sobre el contenido dentro del elemento <details>.

El contenido dentro de <summary> se mostrará como el título del elemento <details> y se utilizará como el primer elemento dentro del elemento <details> al ser mostrado.

Ejemplo de uso

Un ejemplo de cómo utilizar la etiqueta <summary> junto con el elemento <details> podría ser el siguiente:

<details>
  <summary>Información adicional</summary>
  <p>Contenido detallado aquí</p>
</details>

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

En este ejemplo, el texto “Información adicional” se mostrará como el título del elemento <details> y el contenido dentro del elemento <p> solo se mostrará cuando el usuario haga clic en el título.

Atributos

La etiqueta <summary> de HTML5 no tiene atributos específicos, ya que es un elemento de contenido de bloque que solo contiene texto o elementos de marcado dentro de él. Sin embargo, puedes utilizar los atributos globales de HTML5 como class, id, style, etc.

Más ejemplos

Aquí hay algunos ejemplos adicionales de cómo utilizar la etiqueta <summary> junto con el elemento <details> en HTML5:

Ejemplo 1:

<details>
  <summary>Haz clic aquí para ver los detalles del producto</summary>
  <p>Nombre del producto: Camiseta</p>
  <p>Talla: M</p>
  <p>Color: Azul</p>
  <p>Precio: $20</p>
</details>

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

Ejemplo 2:

<details open>
  <summary>Información del vuelo</summary>
  <p>Número de vuelo: DL123</p>
  <p>Fecha: 01/01/2022</p>
  <p>Hora de salida: 8:00 AM</p>
  <p>Hora de llegada: 10:00 AM</p>
</details>

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

Ejemplo 3:

<details>
  <summary>Más información sobre el evento</summary>
  <p>Nombre del evento: Concierto de rock</p>
  <p>Fecha: 05/05/2022</p>
  <p>Hora: 8:00 PM</p>
  <p>Lugar: Estadio de fútbol</p>
  <p>Artista: Band X</p>
</details>

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

En los ejemplos anteriores, el contenido dentro de los elementos <p> solo se mostrará cuando el usuario haga clic en el título proporcionado por <summary> y en el segundo ejemplo el contenido se mostrará automáticamente en la carga de la página, ya que se estableció el atributo open en <details>.