Etiqueta summary en HTML: título de un desplegable
La etiqueta <summary> proporciona el título o resumen activable de un <details>. Sirve para indicar qué información se desplegará y permitir abrirla o cerrarla, por ejemplo los requisitos de un taller. Úsala como primer elemento hijo de <details> cuando quieras ofrecer información adicional bajo un rótulo visible; la interacción funciona sin JavaScript.
Ejemplo mínimo: mostrar los requisitos
<details>
<summary>Ver requisitos del taller</summary>
<ul>
<li>Navegador actualizado</li>
<li>Editor de texto</li>
</ul>
</details>Al principio se ve «Ver requisitos del taller», normalmente con un triángulo. Al activar ese título aparece la lista; al activarlo de nuevo se oculta.
Puedes probar este fragmento dentro del <body> de un documento HTML. Conserva un título propio: si retiras <summary>, el navegador suele mostrar un rótulo genérico que aporta menos información, y el documento deja de cumplir el modelo de contenido de <details>.
Sintaxis y contexto válido
Escribe <summary>…</summary> con ambas etiquetas: ninguna puede omitirse. Coloca un único <summary> directamente dentro de <details>, antes de los demás elementos. Los espacios y saltos de línea usados para indentar son normales; evita texto de contenido antes del título.
Según el HTML Living Standard, admite contenido de frase, opcionalmente mezclado con encabezados. Puedes escribir texto y elementos como <span>, <em> o <strong>, e incluir un encabezado. No admite cualquier estructura: un párrafo <p>, una lista <ul> o un contenedor <div> pertenecen al contenido que sigue al título.
Aunque una implementación puede hacer activable el primer <summary> que encuentre tras otros elementos, eso no hace válido colocarlo al final. Fuera de <details> no es un control desplegable válido ni sustituye un botón independiente.
Cómo elegir un título comprensible
El rótulo debe permitir anticipar el contenido sin abrirlo. «¿Qué debo llevar al taller?» o «Requisitos del taller» son claros. «Más», «Ver» o «Información» resultan ambiguos cuando hay varios bloques juntos. Conserva en la página visible la información imprescindible; el desplegable puede ampliar sus detalles.
El texto sigue visible al abrir el bloque. Por eso una pregunta suele funcionar mejor que una instrucción que solo describe el estado cerrado. No necesitas cambiar «Ver requisitos» por «Ocultar requisitos» para que el control nativo funcione.
Teclado, contenido interno y accesibilidad
El título recibe foco por teclado en los navegadores compatibles: llega con Tab y actívalo con Enter o Espacio. El foco permanece en él al abrir o cerrar. Mantén una indicación visible de foco y un rótulo legible; el navegador comunica el estado del control a las tecnologías de asistencia, aunque el anuncio concreto varía entre combinaciones.
Un enlace o un botón dentro del título puede tener su propia acción y complicar la activación o el recorrido del foco. El modelo de contenido no los prohíbe de forma general, pero exige revisar la interacción por teclado y con las tecnologías de asistencia que debas admitir. En casos sencillos, coloca esos controles después de <summary>, dentro del contenido desplegable.
Si incluyes un encabezado, revisa también su exposición accesible: algunos navegadores no conservan su función de encabezado dentro del control. La advertencia de MDN sobre encabezados en summary explica esta variación. Usar texto sencillo evita depender de ese encabezado para navegar por la página.
Ejemplo práctico: dos títulos con marcador propio
Guarda este documento en UTF-8 como preguntas-taller.html y ábrelo en el navegador. Incluye dos desplegables independientes y todo el CSS necesario; no requiere scripts, archivos adicionales ni servidor.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Información del taller</title>
<style>
body {
font-family: system-ui;
max-width: 40rem;
margin: auto;
padding: 1rem;
}
.preguntas-taller details {
border: 1px solid #777;
padding: 0.75rem;
margin-block: 0.75rem;
}
.preguntas-taller summary {
display: block;
list-style: none;
cursor: pointer;
font-weight: bold;
}
.preguntas-taller summary::-webkit-details-marker {
display: none;
}
.preguntas-taller summary:focus-visible {
outline: 3px solid #164db5;
outline-offset: 4px;
}
.preguntas-taller .indicador {
display: inline-block;
width: 0;
height: 0;
margin-inline-end: 0.55rem;
border-top: 0.3rem solid transparent;
border-bottom: 0.3rem solid transparent;
border-left: 0.45rem solid currentColor;
}
.preguntas-taller details[open] > summary .indicador {
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>Antes de asistir al taller</h1>
<p>El taller empieza a las diez. Consulta los preparativos:</p>
<div class="preguntas-taller">
<details>
<summary><span class="indicador" aria-hidden="true"></span>¿Dónde se imparte el taller?</summary>
<p>En el aula 2 del centro comunitario. La entrada está junto a la biblioteca.</p>
</details>
<details>
<summary><span class="indicador" aria-hidden="true"></span>¿Qué debo llevar al taller?</summary>
<p>Un cuaderno y un lápiz. Las herramientas se prestan durante la actividad.</p>
</details>
</div>
</body>
</html>El CSS retira el marcador original y dibuja otro mediante los bordes del <span> vacío. Apunta a la derecha cuando el bloque está cerrado y gira hacia abajo cuando está abierto. aria-hidden="true" oculta únicamente ese adorno a las tecnologías de asistencia: el título y el estado nativo siguen disponibles. ::-webkit-details-marker es una extensión no estándar para el marcador de navegadores WebKit, documentada en MDN.
Comprueba el resultado así:
- Pulsa Tab hasta el primer título. Debe aparecer el contorno de foco; Enter abre la respuesta y Espacio la cierra.
- Avanza con Tab al segundo título y ábrelo. Ambos bloques pueden permanecer abiertos si activas después el primero.
- Deshabilita JavaScript y recarga. Repite la prueba: la interacción y el giro del indicador siguen funcionando.
- Retira el bloque
<style>y recarga. Vuelve el marcador del navegador, el<span>vacío no añade un icono y los títulos siguen abriendo sus respuestas.
Para mostrar las respuestas permanentemente, sustituye cada pareja <details>/<summary> por un encabezado seguido del párrafo.
Atributos y errores frecuentes
<summary> no tiene atributos específicos. Admite globales como id para identificarlo, class para CSS o lang para un título en otro idioma. open pertenece a <details>; ponerlo en <summary> no abre el bloque. display, list-style y outline son propiedades CSS; details.open es una propiedad DOM de JavaScript.
No añadas tabindex para hacerlo alcanzable si el comportamiento nativo basta. Tampoco agregues role="button" ni un aria-expanded manual: puedes interferir con la exposición nativa del estado. Consulta las reglas de ARIA en HTML.
Si no funciona, revisa primero que sea el primer elemento hijo directo de <details>, que no haya varios títulos y que no esté oculto con CSS. Después retira temporalmente estilos y scripts para localizar cambios que impidan el foco o cancelen la activación.
Preguntas frecuentes y etiquetas relacionadas
¿Summary funciona fuera de details? Puede aparecer como texto, pero no crea un desplegable válido. Usa <button> para una acción independiente.
¿Puedo cambiar el triángulo? Sí. Puedes personalizar el marcador nativo con CSS compatible o sustituirlo como en el ejemplo. Conserva una indicación clara de apertura y cierre, además del foco visible; ocultarlo sin reemplazo hace menos reconocible la interacción.
<details> contiene y controla el bloque; <summary> lo titula. Un encabezado de h1 a h6 organiza contenido que permanece visible y no incorpora por sí mismo una acción desplegable.
Compatibilidad y fuentes
Consulta de compatibilidad: 4 de octubre de 2026. El elemento está ampliamente disponible en los navegadores actuales, según MDN y su tabla de compatibilidad. El soporte del elemento no garantiza idénticos marcadores o anuncios accesibles. Revisa el CSS y cualquier encabezado o control interno en los navegadores y tecnologías de asistencia que quieras admitir.
El HTML Living Standard: summary define significado, contexto, contenido y activación. MDN: summary complementa la referencia con estilos y advertencias de accesibilidad.