¿Qué hacen las etiquetas «details» y «summary»?

Las etiquetas <details> y <summary> en HTML5 trabajan juntas para crear un widget de revelación nativo, a menudo conocido como un «acordeón» o «desplegable».

Este componente permite al usuario mostrar u ocultar interactivamente un bloque de información adicional con un simple clic, y lo mejor es que esta funcionalidad básica se consigue sin necesidad de escribir JavaScript.

<details>

• Es el elemento contenedor principal para todo el widget.
• Encierra tanto el resumen visible (proporcionado por <summary>) como el contenido detallado que se puede mostrar u ocultar.
• Por defecto, cuando la página se carga, el contenido dentro de <details> (a excepción del <summary>) está oculto.
• Se puede hacer que los detalles estén visibles por defecto al cargar la página añadiendo el atributo booleano open: HTML<details open> </details>

<summary>

• Debe ser el primer elemento hijo directo de una etiqueta <details>.
• Proporciona el título, etiqueta o resumen visible y clicable del widget. Es el texto que el usuario ve constantemente y sobre el cual hace clic para expandir o contraer la información detallada.
• Si omites la etiqueta <summary> dentro de un <details>, el navegador generalmente mostrará un texto predeterminado como «Detalles» (o «Details» en inglés) como etiqueta clicable.

¿Cómo funcionan en conjunto?

La etiqueta <summary> actúa como la «palanca» del widget. El texto dentro de <summary> es siempre visible. Al hacer clic en el <summary>, se alterna la visibilidad del resto del contenido que se encuentra dentro del elemento <details> (es decir, todo el contenido que sigue a la etiqueta <summary> dentro de <details>).

Beneficios y Casos de Uso Comunes:

• Nativo y sin JavaScript: Proporciona una solución HTML pura para una interacción común, lo que es bueno para el rendimiento y la simplicidad del código.
• Accesibilidad: Estos elementos están diseñados para ser accesibles. Los lectores de pantalla y otras tecnologías de asistencia pueden entender su estado (abierto o cerrado) e interactuar con ellos correctamente.
• Ideal para:
  • Preguntas Frecuentes (FAQs): Cada pregunta puede ser un <summary> y la respuesta el contenido desplegable.
  • Información complementaria: Mostrar detalles técnicos, notas al pie, o cualquier información secundaria que no necesite estar visible todo el tiempo.
  • Simplificar interfaces: Reducir la cantidad de información visible inicialmente para no abrumar al usuario.
  • Revelar pequeños «spoilers» o soluciones a acertijos de forma controlada.

Ejemplo de uso:

<h2>Preguntas frecuentes sobre nuestro producto</h2>

<details>
  <summary>¿Cuáles son los requisitos del sistema?</summary>
  <p>Para utilizar nuestro producto, necesitas un sistema operativo Windows 10 o superior, macOS 11 (Big Sur) o posterior, o una distribución de Linux compatible. Se recomiendan al menos 8GB de RAM.</p>
</details>

<details>
  <summary>¿Ofrecen un período de prueba gratuito?</summary>
  <p>Sí, ofrecemos un período de prueba completamente funcional de 14 días. No se requiere tarjeta de crédito para iniciar la prueba.</p>
  <p>Puedes <a href="/prueba-gratuita">descargarlo aquí</a>.</p>
</details>

<details open> <summary>¿Cómo contacto con el soporte técnico?</summary>
  <p>Puedes contactar con nuestro equipo de soporte técnico a través de:</p>
  <ul>
    <li>Correo electrónico: soporte@empresa.com</li>
    <li>Teléfono: +34 900 123 456</li>
    <li>Chat en vivo en nuestro sitio web (de 9:00 a 18:00 CET).</li>
  </ul>
</details>
Lenguaje del código: PHP (php)

Este par de etiquetas ofrece una manera muy eficiente y semántica de gestionar la visibilidad del contenido de forma interactiva.