La Etiqueta SUMMARY

Se utiliza para crear un widget de divulgación (acordeón o sección colapsable). Proporciona un título o resumen que los usuarios pueden hacer clic para expandir o contraer contenido adicional.

La etiqueta <summary> en HTML se utiliza junto con <details> para crear un widget de divulgación (acordeón o sección colapsable). Proporciona un título o resumen que los usuarios pueden hacer clic para expandir o contraer contenido adicional. Es ideal para organizar información de manera compacta, como preguntas frecuentes (FAQ), menús desplegables o contenido opcional. Aquí te explicamos cómo implementarla correctamente.

Sintaxis básica

La estructura básica combina <details> y <summary>:

<details>
  <summary>Título o resumen</summary>
  <!-- Contenido oculto que se muestra al hacer clic -->
  <p>Contenido adicional...</p>
</details>

Ejemplo:

<details>
  <summary>¿Qué es HTML?</summary>
  <p>HTML es el lenguaje estándar para crear páginas web.</p>
</details>

Resultado:

¿Qué es HTML?

HTML es el lenguaje estándar para crear páginas web.

Atributos clave

open (en <details>)

Muestra el contenido por defecto sin necesidad de hacer clic:

<details open>
  <summary>Ver detalles</summary>
  <p>Contenido visible inicialmente.</p>
</details>

Casos de uso comunes

a) Preguntas frecuentes (FAQ)

<details>
  <summary>¿Cómo restablezco mi contraseña?</summary>
  <p>Visita la página de recuperación e ingresa tu correo electrónico.</p>
</details>

b) Menús desplegables

<details>
  <summary>Opciones avanzadas</summary>
  <ul>
    <li>Configuración 1</li>
    <li>Configuración 2</li>
  </ul>
</details>

c) Spoilers en artículos

<details>
  <summary>Advertencia: Contiene spoilers</summary>
  <p>El protagonista muere al final.</p>
</details>

d) Código colapsable

<details>
  <summary>Mostrar código</summary>
  <pre><code>console.log("Hola, mundo!");</code></pre>
</details>

Personalización con CSS

a) Estilo básico del `<summary>`

summary {
  cursor: pointer;                 /* Cursor tipo enlace */
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Estilo al enfocar (accesibilidad) */
summary:focus {
  outline: 2px solid #007bff;
}

/* Icono personalizado (flecha) */
summary::marker {
  content: "▶️ ";                 /* Emoji o texto */
}
details[open] summary::marker {
  content: "???? ";
}

b) Animación al expandir

details[open] summary {
  margin-bottom: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details > *:not(summary) {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Accesibilidad

Roles ARIA: <details> y <summary> ya tienen roles semánticos (role="group" y role="button"), pero puedes reforzarlos:

<details role="group">
  <summary role="button" aria-expanded="false">Título</summary>
</details>

Teclado: Los usuarios pueden navegar con Tab y activar con Enter o Espacio.

Lectores de pantalla: Anuncian el estado (expandido/contraído) automáticamente.

Diferencias con `<div>` + JavaScript

`<details>` + `<summary>`	`<div>` + JavaScript
Funcionalidad nativa sin scripts.	Requiere código personalizado.
Accesibilidad integrada.	Necesita roles ARIA manuales.
Menos personalización en algunos navegadores.	Mayor control visual.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    details {
      margin: 10px 0;
      width: 80%;
      max-width: 600px;
    }
    summary {
      background: #007bff;
      color: white;
      padding: 12px;
      border-radius: 5px;
      cursor: pointer;
      list-style: none; /* Oculta el marcador por defecto */
    }
    summary::-webkit-details-marker {
      display: none; /* Oculta el marcador en Chrome */
    }
    summary::before {
      content: "▶";
      margin-right: 10px;
    }
    details[open] summary::before {
      content: "▼";
    }
    details[open] {
      background: #f8f9fa;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    details p {
      padding: 15px;
      margin: 0;
    }
  </style>
</head>
<body>
  <h2>Preguntas frecuentes</h2>
  
  <details>
    <summary>¿Cómo me registro?</summary>
    <p>Dirígete a la página de registro y completa el formulario.</p>
  </details>

  <details>
    <summary>¿Cuáles son los métodos de pago?</summary>
    <p>Aceptamos tarjetas de crédito, PayPal y transferencias bancarias.</p>
  </details>
</body>
</html>

Errores comunes

Olvidar cerrar <details>:

<details>
  <summary>Título</summary>
  <p>Contenido...

Usar <summary> fuera de <details>:

<summary>Título</summary> <!-- Sin details -->

Conclusión

La etiqueta <summary> es una herramienta poderosa para:

Organizar contenido de forma interactiva sin JavaScript.
Mejorar la experiencia de usuario con secciones colapsables.
Mantener la accesibilidad y semántica HTML.

Recuerda:

Usa CSS para personalizar el diseño.
Aprovecha su funcionalidad nativa en lugar de soluciones complejas.
Prueba en diferentes navegadores (soporte casi universal excepto IE).

¡Incorpora <summary> en tus proyectos para crear interfaces limpias y eficientes!