Resumen y Detalles en HTML

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 [removed] para agregar un poco de estilo a la etiqueta summary.

summary {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

Agregando más contenido

Podemos agregar más contenido dentro de la etiqueta details, y automáticamente será expandible y contraíble. Agrega el siguiente código después del primer párrafo para agregar más contenido.

<details>
  <summary aria-expanded="false">Haz clic aquí para ver el contenido</summary>
  <p>El contenido va aquí.</p>
  <p>Más contenido.</p>
  <ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
  </ul>
</details>

Agregando múltiples secciones expandibles

Podemos agregar múltiples secciones expandibles a la página web. Agrega el siguiente código para crear otra sección expandible.

<details>
  <summary aria-expanded="false">Otra sección</summary>
  <p>Contenido de otra sección</p>
</details>

Resumen

La etiqueta <summary> se puede utilizar para crear secciones expandibles y contraíbles de contenido en una página web. Podemos agregar más contenido dentro de la etiqueta details y utilizar estilos para personalizar la apariencia de la etiqueta summary. Al agregar el atributo aria-expanded, podemos proporcionar el estado actual del contenido, lo que lo hace accesible para usuarios con discapacidades.