LabEx
EntrarÚnete

Resumen y Detalles en HTML

HTMLBeginner
Practicar Ahora

Introducción

En HTML, la etiqueta <summary> se utiliza para crear un elemento de resumen expandible y contraíble para el contenido presente en la página web.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Agregando la etiqueta

Antes de agregar la etiqueta <summary>, necesitamos crear una sección de contenido que se pueda expandir o contraer. Para eso, usaremos la etiqueta <details>. Agrega el siguiente código en el archivo index.html dentro de la etiqueta <body>.

<details>
  <summary>Haz clic aquí para ver el contenido</summary>
  <p>El contenido va aquí.</p>
</details>

En el código anterior, hemos agregado una etiqueta de resumen dentro de la etiqueta de detalles para definir el resumen del contenido.

Agregando el atributo aria-expanded

Podemos agregar un atributo aria-expanded a la etiqueta de detalles para proporcionar el estado actual del contenido. Cuando el contenido está expandido, el valor de aria-expanded será true, y cuando está contraído, el valor será false. Agrega el siguiente código después de la etiqueta <summary> para incluir el atributo aria-expanded.

<details>
  <summary aria-expanded="false">Haz clic aquí para ver el contenido</summary>
  <p>El contenido va aquí.</p>
</details>

Dar estilo a la etiqueta summary

La etiqueta summary no tiene atributos específicos, pero podemos estilarla con CSS. Agrega el siguiente código en la etiqueta