Etiqueta HTML <details>
La etiqueta <details> muestra información adicional que el usuario puede abrir y ver. Atributos y ejemplos de la etiqueta.
La etiqueta <details> es uno de los elementos HTML5. Crea un widget de revelación: un control interactivo que el usuario puede abrir para ver contenido adicional y cerrar para ocultarlo. Por defecto el contenido permanece oculto, y el navegador muestra un pequeño triángulo (el marcador de revelación) que rota para indicar el estado abierto o cerrado.
El primer hijo de <details> debe ser un elemento <summary>, que establece la etiqueta visible que el usuario hace clic para alternar el widget. El <summary> es el control real — el resto del contenido dentro de <details> es lo que se muestra u oculta. Si omites <summary>, el navegador proporciona una etiqueta predeterminada como "Details".
Por qué usar <details>
La gran ventaja de <details> es que ofrece un widget de mostrar/ocultar completamente funcional sin nada de JavaScript. El navegador gestiona el comportamiento de abrir/cerrar, el soporte de teclado y la accesibilidad por ti.
Casos de uso habituales:
- Listas de preguntas frecuentes (FAQ) — cada pregunta es un
<summary>y la respuesta se revela al hacer clic. - Revelación progresiva — oculta configuraciones avanzadas, textos legales extensos o secciones de "leer más" para que la página permanezca escaneable.
- Acordeón sin JavaScript como alternativa — como funciona sin scripting,
<details>es una base sólida para acordeones. Incluso si tu JavaScript no carga, el contenido sigue siendo accesible.
Comparado con un acordeón JavaScript construido a mano, <details> requiere menos código, es accesible automáticamente con teclado y lectores de pantalla, y se degrada con elegancia. Recurre a un widget JS personalizado solo cuando necesites comportamientos que el elemento nativo no puede ofrecerte (por ejemplo, transiciones de altura animadas en todo el contenido).
Sintaxis
La etiqueta <details> viene en pares. El contenido se escribe entre las etiquetas de apertura (<details>) y cierre (</details>).
Ejemplo de la etiqueta HTML <details>:
Etiqueta HTML <details>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<details>
<summary>Click to see details</summary>
<p>Detailed information is here.</p>
</details>
</body>
</html>Resultado
El atributo open
Añade el atributo boolean open para que el widget esté expandido al cargar la página:
<details open>
<summary>What is HTML?</summary>
<p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>El atributo open refleja el estado actual en tiempo real. Cuando el usuario alterna el widget, el navegador añade o elimina open en el elemento automáticamente — no tienes que gestionarlo. También puedes alternarlo tú mismo desde un script:
const details = document.querySelector('details');
details.open = true; // expand
details.open = false; // collapseLeer details.open te indica si el widget está actualmente abierto.
Ejemplo de la etiqueta HTML <details> dentro de una etiqueta <form>:
Etiqueta HTML <details>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="action_form.php" method="get">
<details>
<summary>Departure airport:</summary>
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Birmingham">
<option value="Cambridge">
<option value="Oxford">
<option value="Bangor">
</datalist>
<input type="submit" value="confirm" />
</details>
</form>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| open | open | Indica que la información de la etiqueta debe mostrarse inicialmente en forma expandida. |
La etiqueta <details> también admite los Atributos Globales y los Atributos de Evento.
Cómo dar estilo a una etiqueta HTML <details>
details {
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.5em;
}
summary {
font-weight: bold;
cursor: pointer;
}Dar estilo al marcador de revelación
La mayoría de los navegadores renderizan el triángulo de abrir/cerrar mediante el pseudoelemento ::marker en el <summary>. Para cambiarlo o eliminarlo, establece list-style en el summary:
/* Remove the default triangle */
summary {
list-style: none;
}
/* Replace it with your own characters */
summary::marker {
content: "▶ ";
}
details[open] summary::marker {
content: "▼ ";
}Los navegadores más antiguos basados en WebKit (Safari/Chrome antiguos) usaban un pseudoelemento no estándar summary::-webkit-details-marker en su lugar. Para cubrirlos, ocúltalo también:
summary::-webkit-details-marker {
display: none;
}El evento toggle
El elemento <details> dispara un evento toggle cada vez que se abre o cierra. Este es el gancho adecuado para carga diferida de contenido, envío de analíticas o sincronización del estado de la interfaz:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
if (details.open) {
console.log('Opened');
} else {
console.log('Closed');
}
});El evento se ejecuta después de que el estado ya ha cambiado, por lo que details.open refleja el nuevo valor dentro del manejador.
Accesibilidad
La combinación nativa <details>/<summary> incluye accesibilidad integrada. Los navegadores exponen el <summary> con un rol similar al de botón y el <details> como un group, anuncian el estado expandido/contraído a los lectores de pantalla, y hacen que el summary sea enfocable y operable con Enter y Space. Esta es una razón clave para preferir el elemento nativo sobre un acordeón basado en script — obtienes semántica correcta y soporte de teclado de forma gratuita, sin necesidad de gestionar aria-expanded tú mismo.
Agrupación con el atributo name
Los navegadores modernos (Chrome 120+ y otros motores recientes) admiten un atributo name en <details>. Cuando varios elementos <details> comparten el mismo name, se comportan como un grupo exclusivo, como un acordeón: abrir uno cierra automáticamente los demás.
<details name="faq" open>
<summary>Question one</summary>
<p>Answer one.</p>
</details>
<details name="faq">
<summary>Question two</summary>
<p>Answer two.</p>
</details>Al ser una característica más reciente, los navegadores que no admiten name simplemente lo ignoran y permiten que cada widget se abra de forma independiente — una mejora progresiva segura.
Etiquetas relacionadas
<summary>— la etiqueta visible y el control de un widget<details>.<dialog>— un cuadro de diálogo modal o no modal nativo, útil cuando necesitas una superposición en lugar de una revelación en línea.