Resumen

  • details y summary convierten una parte de la página en un panel que el navegador abre o cierra a petición del lector.
  • Con name, varios paneles pueden formar un acordeón exclusivo: abrir uno cierra otro.

Una página larga puede parecer el cajón donde acaba todo lo que nadie quiso ordenar: instrucciones, opciones y letra pequeña en una sola montaña. Los autores aprendieron a plegar secciones con JavaScript. HTML acabó añadiendo una pieza más elemental: details con un summary delante. El navegador se ocupa de la bisagra. El lector ve una etiqueta y decide abrir. No hace falta admirar el mueble para agradecer que la manilla esté donde se espera.

En el primer borrador público de marcado HTML de marzo de 2010, el W3C señalaba details y summary como elementos nuevos. Definía details como control para información disponible cuando se pide y describía el atributo booleano open. El documento fija una decisión de diseño: el contenido sigue en el documento, pero la revelación tiene una forma reconocible dentro del propio lenguaje.

La referencia del W3C de 2011 mantuvo el mecanismo. Un summary al frente identifica lo que se puede desplegar; open anuncia que el resto debe mostrarse. Así el panel lleva su significado en el marcado, en lugar de depender por completo de un programa que lo haga bailar. El autor elige qué guarda y cómo lo presenta. «Más» suena económico hasta que el lector tiene que adivinar qué compró con ese clic.

El estándar HTML vigente explica el reparto de tareas. El primer summary es la leyenda del panel; si falta, el navegador debería ofrecer una. Sin open se ve solo esa leyenda. Con open se ve también el contenido. Cuando el usuario pide un cambio, el navegador añade o quita el atributo. Además puede emitirse un evento toggle. La puerta tiene estado, gesto y señal; no hay que improvisar la definición básica del movimiento.

Hasta el pequeño triángulo tiene instrucciones. Las reglas de representación distinguen el marcador de cierre del de apertura en summary. Nadie lo confundiría con una portada espectacular. Precisamente por eso funciona: comunica que hay algo detrás y si ya está a la vista. Un informe de progreso, los ajustes menos frecuentes o una guía larga pueden utilizar esa convención sin convertir cada pliegue en una función inventada para la ocasión.

Luego llegó la política de pasillo. Si varios details comparten name, abrir uno puede cerrar el que estaba abierto: un acordeón exclusivo definido por el navegador. El propio estándar advierte que esa limpieza visual puede frustrar a quien necesita tener varias secciones abiertas. El editor gana espacio; el lector pierde una mesa donde comparar papeles. Una norma que reconoce ese coste nos recuerda que el orden de la pantalla siempre lo paga alguien.

La pequeña puerta resume una negociación completa. El autor decide el rótulo, el contenido y, mediante name, si hay que cerrar la puerta vecina. El navegador ejecuta la maniobra. El lector inicia el gesto. Cuando el rótulo explica lo que hay dentro y permite comparar varias partes cuando hace falta, el control cumple su promesa: una página menos desordenada que todavía respeta la curiosidad de quien la lee.