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>.