Etiqueta details en HTML: contenido desplegable sin JavaScript

La etiqueta <details> crea un bloque cuyo contenido el usuario puede desplegar u ocultar. Sirve para ofrecer información adicional sin mostrarla toda de entrada, por ejemplo respuestas sobre los materiales de un taller. Úsala cuando un título visible permita reconocer qué contiene el bloque; la apertura y el cierre funcionan sin JavaScript.

Ejemplo mínimo: una pregunta y su respuesta

<details>
  <summary>¿Qué necesito para empezar?</summary>
  <p>Un editor de texto y un navegador.</p>
</details>

Inicialmente se ve la pregunta, normalmente acompañada de un marcador. Al activarla aparece la respuesta; al activarla otra vez se oculta. Cambiar el texto de <summary> cambia el título del control, pero no su comportamiento. La apariencia del marcador depende del navegador y del CSS.

Sintaxis y contexto válido

Escribe apertura y cierre: <details>…</details>. Sus etiquetas no pueden omitirse. Coloca un único <summary> como primer elemento hijo y después contenido de flujo, como párrafos, listas o controles. <details> puede aparecer donde se admite contenido de flujo, por ejemplo dentro de una sección; no lo metas dentro de un <p>.

Aunque un navegador puede proporcionar un título genérico si falta <summary>, escribe uno propio para que el ejemplo sea válido y la pregunta resulte comprensible. Estas reglas proceden del modelo de contenido de details y summary.

Cómo empieza abierto: el atributo open

¿Cómo empieza abierto? Añade open a la etiqueta de apertura:

<details open>
  <summary>Materiales del taller</summary>
  <p>Trae un cuaderno y un lápiz.</p>
</details>

open es booleano: su presencia abre el bloque y su ausencia lo cierra. Por eso open="false" también lo deja abierto; ese valor es, además, una escritura incorrecta de un atributo booleano. Para empezar cerrado, omítelo.

Durante la interacción, el navegador añade o retira el atributo. Desde JavaScript, la propiedad DOM bloque.open = false sí cierra el bloque: es una asignación booleana, no el texto de un atributo. Consulta la propiedad open en MDN.

Preguntas independientes o un grupo exclusivo con name

Sin name, cada desplegable conserva su estado: puedes consultar varias respuestas a la vez. Un mismo name no vacío agrupa bloques del mismo árbol del documento. En un navegador compatible, abrir uno cierra el que estuviera abierto en ese grupo; también puedes cerrar todos. No necesitan ser hermanos ni estar contiguos para compartir grupo. La referencia de name en MDN explica esta asociación.

Elige nombres distintos para grupos distintos. El estándar exige no declarar varios miembros del mismo grupo con open y no anidar un miembro dentro de otro del mismo grupo. Conviene mantener las preguntas relacionadas en un contenedor con un encabezado que las presente; consulta las reglas del grupo de details.

La exclusividad puede ahorrar espacio, pero dificulta comparar respuestas. Para revisar a la vez materiales y horarios de un taller, los bloques independientes pueden ser más cómodos.

Ejemplo práctico: comparar las dos variantes

Guarda este documento en UTF-8 como preguntas-taller.html y ábrelo en un navegador. Las tres preguntas aparecen primero como bloques independientes y luego con name compartido. Incluye todo el CSS necesario y no requiere scripts, recursos adicionales ni servidor.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Preguntas sobre el taller</title>
    <style>
      body { font-family: system-ui; max-width: 40rem; margin: auto; padding: 1rem; }
      section { margin-block: 2rem; }
      details { border: 1px solid #777; padding: 0.75rem; margin-block: 0.5rem; }
      summary { cursor: pointer; }
      summary:focus-visible { outline: 3px solid #164db5; outline-offset: 3px; }
      details[open] > summary { font-weight: bold; }
    </style>
  </head>
  <body>
    <h1>Antes de asistir al taller</h1>
    <p>El taller empieza a las diez. Estas respuestas amplían los preparativos.</p>

    <section>
      <h2>Respuestas independientes</h2>
      <details>
        <summary>¿Qué materiales llevo?</summary>
        <p>Un cuaderno y un lápiz. Las herramientas se prestan en el taller.</p>
      </details>
      <details>
        <summary>¿Cuándo conviene llegar?</summary>
        <p>Diez minutos antes para preparar la mesa de trabajo.</p>
      </details>
      <details>
        <summary>¿Necesito experiencia previa?</summary>
        <p>No. La primera actividad presenta las herramientas paso a paso.</p>
      </details>
    </section>

    <section>
      <h2>Respuestas con apertura exclusiva</h2>
      <details name="details-taller-preparativos">
        <summary>¿Qué materiales llevo?</summary>
        <p>Un cuaderno y un lápiz. Las herramientas se prestan en el taller.</p>
      </details>
      <details name="details-taller-preparativos">
        <summary>¿Cuándo conviene llegar?</summary>
        <p>Diez minutos antes para preparar la mesa de trabajo.</p>
      </details>
      <details name="details-taller-preparativos">
        <summary>¿Necesito experiencia previa?</summary>
        <p>No. La primera actividad presenta las herramientas paso a paso.</p>
      </details>
    </section>
  </body>
</html>

Comprueba el resultado así:

1. Pulsa Tab hasta la primera pregunta. Debe verse el contorno de foco. Pulsa Enter para abrirla y Espacio para cerrarla; el foco permanece en el título.
2. Abre las tres preguntas de «Respuestas independientes». Las tres respuestas pueden permanecer visibles.
3. Abre dos preguntas sucesivas de la segunda sección. Con soporte de name, la primera se cierra cuando abres la segunda. Las respuestas de la primera sección permanecen abiertas.
4. Deshabilita JavaScript y recarga. Repite las acciones: este documento no contiene scripts y conserva la interacción nativa.
5. Retira name de los tres bloques de la segunda sección y repite el paso 3: ahora pueden quedar varias respuestas abiertas. Ese resultado también es la alternativa esperable si un navegador admite <details> pero ignora name.

Quitar el CSS conserva la apertura y el cierre, con la presentación del navegador. Para mostrar las respuestas permanentemente, sustituye cada bloque por un encabezado y un párrafo: quitar únicamente <details> dejaría un <summary> fuera de su contexto válido.

Atributos, CSS y el evento toggle

Los atributos específicos son open y name. id, class y lang son globales. El selector CSS details[open] del ejemplo pone el título en negrita cuando está abierto; el CSS no establece ese estado.

¿Details necesita JavaScript? No para su interacción básica ni para la exclusividad en navegadores compatibles. Si necesitas observar cambios desde un script, existe el evento toggle. Se emite después del cambio; varios cambios rápidos pueden reunirse en un solo evento. toggle no es un atributo de estado. Un manejador como ontoggle o un listener añade código, mientras que la propiedad DOM open permite consultar el estado real.

Accesibilidad, errores y etiquetas relacionadas

Escribe preguntas descriptivas y conserva el foco visible. El control nativo comunica su estado a las tecnologías de asistencia, aunque el anuncio concreto depende de la combinación de navegador y lector de pantalla. No añadas role="button" ni mantengas manualmente aria-expanded sobre <summary>: puedes interferir con su semántica nativa. Las reglas de ARIA en HTML explican esta precaución.

Mantén visible el contexto esencial, como el horario del taller. Evita esconder todas las instrucciones detrás de títulos vagos como «Más». Un contenido cerrado tampoco es secreto: sigue en el documento.

Si el desplegable no funciona, revisa primero la posición de <summary>, después si tu CSS oculta el control o la respuesta y finalmente si algún script impide la activación. Si solo falla el cierre automático entre preguntas, comprueba que sus nombres coincidan y que el navegador admita name.

<summary> nombra este desplegable; <dialog> sirve para una ventana de diálogo y requiere considerar su apertura, cierre y foco. Para una acción independiente, como guardar cambios, utiliza <button>. <details> no sustituye un sistema de pestañas, una navegación ni un menú ARIA con sus propias reglas de teclado.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026 en los datos de MDN para details:

El soporte general del elemento no demuestra soporte de name. En versiones que no lo implementan, permite que las preguntas sean independientes; si la exclusividad es indispensable, prepara y prueba una alternativa. La sintaxis y las restricciones se contrastaron con el HTML Living Standard, y el comportamiento básico con la referencia de details en MDN.