Etiqueta <summary>

La etiqueta <summary> se utiliza en HTML para definir un encabezado o resumen interactivo dentro de una etiqueta <details>. El propósito principal de esta etiqueta es permitir que los usuarios puedan hacer clic en el encabezado para expandir o contraer el contenido asociado de la etiqueta <details>. Este comportamiento es muy útil cuando deseas ocultar información adicional hasta que el usuario decida verla.

¿Cómo funciona?

La etiqueta <summary> debe ser colocada dentro de una etiqueta <details>, que define una sección de contenido que puede ser expandida o contraída. Sin la etiqueta <details>, la etiqueta <summary> no tendrá ningún efecto visible o funcional en la página.

Ejemplo de código

<details>
    <summary>
        Haz clic aquí para ver más
    </summary>
    <p>
        Este es el contenido oculto dentro de la etiqueta <details>.
    </p>
</details>

      

En este ejemplo, al hacer clic en el texto "Haz clic aquí para ver más", el contenido dentro de la etiqueta <details> se mostrará o se ocultará, dependiendo del estado actual. El contenido dentro de <summary> actúa como un encabezado o resumen, mientras que el contenido dentro de <details> es el contenido oculto que se revela al hacer clic.

Consideraciones importantes:

• Interactividad: La etiqueta <summary> no funciona por sí sola. Siempre debe estar dentro de una etiqueta <details> para habilitar la funcionalidad de expansión y contracción.
• Soporte de navegadores: Los navegadores modernos son compatibles con las etiquetas <summary> y <details>. Sin embargo, algunos navegadores más antiguos podrían no soportarlas o requerir un comportamiento especial mediante JavaScript.
• Accesibilidad: El uso de estas etiquetas puede mejorar la accesibilidad de tu sitio web, ya que las tecnologías de asistencia pueden identificar y manejar el contenido interactivo de manera adecuada.

¿Por qué usar <summary> y <details>?

Estas etiquetas son útiles para ocultar y mostrar contenido de manera dinámica sin necesidad de usar JavaScript. Esto puede mejorar la experiencia del usuario al permitir que se presenten secciones adicionales de información sin sobrecargar la página. Por ejemplo, son ideales para preguntas frecuentes (FAQ), tutoriales con pasos opcionales, o información adicional que no siempre es necesaria para el usuario, pero que está disponible bajo demanda.

Resumen:

• La etiqueta <summary> es un encabezado interactivo dentro de la etiqueta <details>.
• El contenido de la etiqueta <summary> actúa como un resumen, mientras que el contenido oculto está dentro de la etiqueta <details>.
• Al hacer clic en el encabezado, el contenido de la etiqueta <details> se revela o se oculta.
• Este patrón mejora la experiencia del usuario, especialmente cuando hay información adicional que no necesita ser visible todo el tiempo.