Etiqueta HTML <summary>
La etiqueta HTML <summary> define la etiqueta clicable de un widget <details>. Sintaxis, accesibilidad, estilos y ejemplos.
La etiqueta <summary> define el título clicable — la etiqueta visible — de un widget de revelación <details>. Al hacer clic en el summary se expande o contrae el resto del contenido de <details>, por lo que el summary es la parte que siempre permanece en pantalla, independientemente de si el widget está abierto o cerrado.
El elemento <summary> debe ser el primer hijo de un elemento <details>. Si <details> no tiene un <summary>, el navegador proporciona una etiqueta predeterminada (generalmente la palabra "Details"), que rara vez es lo que se desea, por lo que casi todos los widgets de revelación deberían incluir uno.
Esta página cubre la sintaxis de <summary>, su comportamiento, sus características de accesibilidad, el evento toggle y cómo aplicarle estilos (incluyendo la eliminación del triángulo de revelación).
Sintaxis
La etiqueta <summary> viene en pares. El texto de la etiqueta se escribe entre las etiquetas de apertura <summary> y de cierre </summary>, y se coloca directamente dentro de <details>.
Ejemplo de la etiqueta HTML <summary>
Etiqueta HTML <summary>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<details>
<summary>Copyright 2013-2014.</summary>
<p>W3docs. All rights reserved.</p>
<p>The content of the website is the property of W3Docs.com.</p>
</details>
</body>
</html>Contenido enriquecido dentro de <summary>
Un summary no se limita a texto plano. Puede contener contenido en línea como <strong>, <em>, <code> o un ícono, lo que resulta útil para enfatizar la etiqueta:
<details>
<summary><strong>Shipping & returns</strong> — read before ordering</summary>
<p>Orders ship within 2 business days. Returns accepted for 30 days.</p>
</details>Mantén el summary corto y significativo: es la etiqueta que un usuario lee (y que un lector de pantalla anuncia) para decidir si abre el widget.
Accesibilidad
El elemento <summary> expone un rol ARIA implícito de button a las tecnologías de asistencia, y es enfocable y operable con teclado de forma predeterminada:
- Tab mueve el foco al summary.
- Enter o Space alterna la apertura o cierre del
<details>padre.
Por este motivo, no debes envolver un <button> real ni un enlace dentro del summary — el summary ya es el control. Asegúrate de que el summary contenga una etiqueta clara y descriptiva para que los usuarios que navegan con tabulación o con un lector de pantalla sepan qué revela el widget.
El evento toggle y details.open
El estado abierto/cerrado de un widget de revelación reside en el elemento <details>, no en el summary. El atributo boolean open refleja este estado, y puedes leerlo o establecerlo como details.open en JavaScript.
Cada vez que el estado cambia — por clic, teclado o script — el navegador dispara un evento toggle en el elemento <details>. Escuchar este evento te permite reaccionar a que el usuario abra o cierre el widget (por ejemplo, cargar contenido de forma diferida o enviar datos analíticos) en lugar de consultar el estado periódicamente:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('Details is now', details.open ? 'open' : 'closed');
});Cómo aplicar estilos a la etiqueta <summary>
El estilo predeterminado de un <summary> utiliza la propiedad CSS display con el valor list-item, que es lo que dibuja el triángulo de revelación (el marcador) junto a la etiqueta.
Puedes aplicar estilos al summary como a cualquier otro elemento — cambiar su color, agregar padding o establecer un cursor:
summary {
color: blue;
cursor: pointer;
padding: 8px;
}Eliminar el triángulo de revelación
Para ocultar el triángulo predeterminado de forma fiable en todos los navegadores, elimina el marcador de lista y también borra el marcador heredado de WebKit/Blink:
summary {
list-style: none; /* Firefox and standards-based browsers */
}
summary::-webkit-details-marker {
display: none; /* Safari and older Chrome */
}Atributos
La etiqueta <summary> no tiene atributos propios obligatorios. Admite los Atributos Globales y los Atributos de Evento.
Crear una FAQ / acordeón
Dado que cada <details> funciona de forma independiente, puedes colocar varios en una página para crear una FAQ o un acordeón. Cada <summary> es la pregunta y el contenido oculto es la respuesta:
<details>
<summary>How do I track my order?</summary>
<p>Use the tracking link in your confirmation email.</p>
</details>
<details>
<summary>Can I change my shipping address?</summary>
<p>Yes, as long as the order has not yet shipped.</p>
</details>
<details>
<summary>Do you ship internationally?</summary>
<p>We ship to most countries. Rates are shown at checkout.</p>
</details>Para permitir que solo una sección esté abierta a la vez (un verdadero acordeón), asigna a los elementos <details> el mismo atributo name para que el navegador los mantenga mutuamente excluyentes.
La etiqueta <summary> es uno de los elementos HTML5. Consulta también el elemento <details> al que etiqueta.