<details> / <summary>
Elementos HTML que ofrecen un desplegable/acordeón integrado sin JavaScript. <details> oculta su contenido tras un encabezado <summary> pulsable que se despliega y repliega. Accesible y compatible con teclado de fábrica.
Mecánica: se coloca el contenido dentro de <details> con un <summary> primero; el navegador solo muestra el summary hasta que se pulsa, momento en el que el contenido se despliega. El atributo open controla/refleja el estado. Casos de uso: secciones de preguntas frecuentes, despliegues de "leer más", paneles colapsables, spoilers — todo lo que antes exigía JS para mostrar/ocultar. Detalle más reciente: el atributo name hace que varios <details> con el mismo nombre se comporten como un acordeón exclusivo (solo uno abierto a la vez) — también sin JS. Ventaja: accesibilidad gratis (funciona con lectores de pantalla y teclado), sin código, y funciona incluso con JS desactivado. Se puede estilizar con ::details-content y animar. Un ejemplo clásico de una función HTML que sustituye a toda una categoría de widgets JS.