Las etiquetas details y summary para mostrar contenido bajo demanda con solo HTML

Muchas veces empleamos librerías de JavaScript sin más para agregar componentes que de por sí no existen de forma nativa en nuestro navegador; como cuando queremos mostrar un simple diálogo en HTML que empleamos Bootstrap o una de las mil y una librerías o JavaScript que podemos encontrar en Internet; uno de esos casos es cuando queremos mostrar contenido bajo demanda que podemos hacerlo muy fácilmente empleando las etiquetas details y summary.

Anteriormente vimos como usar las tags <base> y <abbr>

Etiquetas details y summary en HTML: guía completa con ejemplos prácticos

A veces damos por hecho que necesitamos una librería de JavaScript para todo: menús, acordeones, desplegables… Yo mismo antes hacía eso, hasta que descubrí que HTML ya traía una joyita integrada: las etiquetas <details> y <summary>. Desde entonces, cada vez que quiero mostrar contenido “bajo demanda”, lo resuelvo de forma nativa, limpia y más ligera.

En esta guía te enseño todo: desde lo básico hasta patrones avanzados, incluyendo trucos CSS, compatibilidad, accesibilidad y casos reales que he usado en mis propios proyectos.

Qué son las etiquetas details y summary y para qué sirven

Las etiquetas <details> y <summary> forman un pequeño “widget de divulgación”: un bloque que muestra una cabecera y, al hacer clic, despliega contenido oculto. Es prácticamente un acordeón HTML nativo.

La idea del “acordeón” nativo de HTML5

• El <summary> hace de cabecera clicable.
• El <details> es el contenedor que oculta o muestra su contenido interno.

Cuando no defines un <summary>, el navegador crea uno automáticamente (a veces con el texto “Detalles”). Pero casi siempre conviene personalizarlo.

Cuándo usarlos y por qué evitar librerías innecesarias

Muchas veces usamos librerías como Bootstrap solo para crear efectos básicos. Yo lo hacía antes: necesitaba mostrar un panel pequeño, y terminaba importando medio framework. Cuando descubrí estas etiquetas, dejé de hacerlo, porque funcionan en la mayoría de navegadores modernos, pesan prácticamente cero y son accesibles por defecto.

Cómo funciona un <details> paso a paso

Estructura mínima (con y sin <summary>)

<details>
 <summary>Ver más</summary>
 <p>Contenido oculto al inicio.</p>
</details>

Si omites <summary>, el navegador lo genera y no podrás estilizarlo igual, así que es buena práctica declararlo siempre.

El atributo open: mostrar contenido por defecto

Si quieres que el panel inicie desplegado, simplemente usa:

<details open>
 <summary>Título</summary>
 <p>Contenido visible desde el inicio.</p>
</details>

Cuando quería mostrar imágenes (“Mi genial foto”, como en tu ejemplo), usaba open para destacar contenido importante sin obligar al usuario a hacer clic.

Qué ocurre en el DOM cuando se despliega

Cuando un usuario abre un <details>, el navegador agrega automáticamente el atributo open. Esto te permite:

• Estilizarlo con details[open]
• Detectar cambios con el evento toggle
• Saber si está abierto desde JavaScript mediante element.open

Funcionamiento de las etiquetas details y summary

Estas etiquetas tienen que estar en el cuerpo de nuestra web, en otras palabras nuestro body y las mismas al ser configuradas ofrecen un header en el que el usuario puede dar un click y el resto del contenido se muestra; en otras palabras, el contenido que definimos en details es mostrado cuando damos clic en una cabecera la cual definimos con summary.

En esta entrada se explica en detalle el funcionamiento de la etiqueta details que permite mostrar/ocultar contenido bajo demanda o a través de la interacción del usuario sobre este campo:

details y summary en la práctica

Antes de ponernos a definir estas etiquetas details y summary en conjunto, vamos a ver un ejemplo de lo cual explicamos anteriormente; así que de un clic en la cabecera y verá que aparece un contenido "Hola Mundo":

Da un clic sobre el texto anterior para mostrar el contenido secundario.

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Título</summary>
        <p>Hola Mundo</p>
    </details>

La etiqueta details es responsable para demarcar el contenido relevante, mientras que el contenido abarcado por la etiqueta summary es responsable de demarcar el contenido secundario el cual es mostrado bajo demanda; así de simple

Siempre mostrar el contenido abierto

Si deseas mostrar el contenido secundario abierto se debe especificar el atributo open dentro del elemento details:

Da un clic sobre el texto anterior para ocultar el contenido secundario.

El experimento anterior corresponde al siguiente HTML:

    <details open>
        <summary>Tigre</summary>
        <img src="tigre-200.jpg">
        <p>Mi genial foto.</p>
    </details>

La única diferencia con el anterior ejemplo es que este cuenta con el atributo open; además con este atributo es posible definir reglas CSS específicas para estas etiquetas como veremos en la siguiente sección:

CSS para las etiquetas details y summary

Como cualquier otro selector, es posible definir estilos para estas etiquetas; podemos aplicar lo que queramos, cambiar el estilo de letra, color, tamaño, márgenes y un largo etc:

details[open] {}
details[open] summary {}

Ejemplos básicos para empezar

Ejemplo “Hola Mundo” desplegable

Tal como mostraste en tu propio artículo:

<details>
 <summary>Título</summary>
 <p>Hola Mundo</p>
</details>

Este ejemplo es perfecto para entender la mecánica del cliqueo.

Ejemplo con texto, imágenes y elementos mixtos

<details>
 <summary>Tigre</summary>
 <img src="tigre-200.jpg" alt="Foto de tigre">
 <p>Mi genial foto.</p>
</details>

Yo uso este patrón cuando necesito mostrar descripciones breves o galerías pequeñas sin saturar el diseño.

Mini panel informativo

Los <details> manejan muy bien HTML complejo: tablas, listas y demás.

<details>
 <summary>Order #545645144</summary>
 <table> ... </table>
</details>

Lo usé incluso para reproducir recibos o información concentrada durante pruebas de maquetación.

Estilos CSS para details y summary

Estilos base: tipografía, colores y espacios

Puedes aplicar cualquier estilo como si fuera un contenedor normal:

details {
 margin: 1rem 0;
}
summary {
 cursor: pointer;
 font-weight: bold;
}

Personalizar la flecha con ::marker y ::before

Algunos navegadores permiten estilizar la flecha predeterminada:

summary::marker {
 color: #222;
 font-size: 130%;
}

Si quieres eliminarla y usar un icono propio (cosa que yo hice más de una vez), puedes:

summary::-webkit-details-marker {
 display: none;
}
details summary::before {
 content: "+ ";
}
details[open] summary::before {
 content: "- ";
}

Estilos condicionales con details[open]

Esto permite destacar el estado abierto, como hacías en tu ejemplo del menú:

details[open] summary {

 background-color: #08B;

 color: #FFF;

}

Reemplazar el icono por imagen

details summary::before {
 background-image: url(icon.png);
 width: 20px;
 height: 20px;
 display: inline-block;
}

A partir de lo explicado anteriormente, se nos puede ocurrir algunos experimentos como los mostrados a continuación.

Detalle de compras en línea

Como se comentó anteriormente, se puede definir CSS compuestos por múltiples etiquetas anidadas como ocurre con las tablas; aquí la etiquetas summary y details funcionan perfectamente:

El experimento anterior corresponde al siguiente HTML:

    <details>
         <summary>Order #545645144</summary>
         <table>
             <tr>
                 <td>Fecha</td>
                 <td>10/12/2015 12:45 pm</td>
             </tr>
             <tr>
                 <td>Orden número</td>
                 <td>#545645144</td>
             </tr>
             <tr>
                 <td>Courier</td>
                 <td>UPS</td>
             </tr>
             <tr>
                 <td>Dirección</td>
                 <td>1600 Ave NW, Washington, DC 20500, EEUU.</td>
             </tr>
             <tr>
                 <td>Pedido</td>
                 <td>
                     <ul>
                         <li>Apple iPhone 5.......... $799.00</li>
                         <li>Amazon Fire TV Stick.... $39.00</li>
                         <li>PlayStation TV.......... $79.00</li>
                         <li>Total................... $917.00</li>
                     </ul>
                 </td>
             </tr>
         </table>
     </details>

También se puede cambiar el color, tamaño, etc del indicador del summary que está ubicado a la izquierda empleando el selector details-marker.

    summary::-webkit-details-marker {
        color: #222;
        font-size: 130%;
    }

Listados de controles con summary

No solo se puede usar la etiqueta details para mostrar un panel informativa como el caso anterior, también podemos colocar un panel adicional de controles como el siguiente experimento:

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Menú</summary>
        <ul>
            <li><a href="#Comprar">Comprar</a></li>
            <li><a href="#Devolver">Devolver</a></li>
            <li><a href="#Comparar">Comparar</a></li>
        </ul>
    </details>

Además, empleamos el selector:

    details[open] summary{
        background-color: #08B;
        color:#FFF;
        border-radius:5px 5px 0 0;
    }

Para cambiar el aspecto del elemento summary o la cabecera cuando está abierto.

Las transiciones en CSS...

Podemos emplear otras propiedades como transiciones para definir cambios suaves:

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Menú</summary>
        <ul>
            <li><a href="#Comprar">Comprar</a></li>
            <li><a href="#Devolver">Devolver</a></li>
            <li><a href="#Comparar">Comparar</a></li>
        </ul>
    </details>

Una consideración para el siguiente ejemplo (Si no deseas mostrar el pequeño indicador):

    summary::-webkit-details-marker {
        display: none;
    }

También es posible cambiar el icono del indicador por alguno personalizado; por ejemplo, una imagen:

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Menú</summary>
        <ul>
            <li><a href="#Comprar">Comprar</a></li>
            <li><a href="#Devolver">Devolver</a></li>
            <li><a href="#Comparar">Comparar</a></li>
        </ul>
    </details>

Para cambiar el icono indicador se emplea el selector after o before:

    details summary:before {
        display: inline-block;
        width: 32px;
        height: 18px;
        margin-right: 8px;
        content: "";
        float:left;
        background-image: url(navigation_collapse.png);
    }

Patrones avanzados con details

Menús y listas de acciones sin JavaScript

<details>
 <summary>Menú</summary>
 <ul>
   <li><a href="#Comprar">Comprar</a></li>
   <li><a href="#Devolver">Devolver</a></li>
   <li><a href="#Comparar">Comparar</a></li>
 </ul>
</details>

Yo usaba este patrón para menús secundarios sin necesidad de JS.

Acordeón exclusivo usando el atributo name

Característica moderna (2024–2025):

<details name="acordeon" open>
 <summary>Sección 1</summary>
 <p>Contenido</p>
</details>
<details name="acordeon">
 <summary>Sección 2</summary>
 <p>Contenido</p>
</details>

Solo se abre uno a la vez.

Transiciones suaves con CSS

Aunque <details> no anima la apertura por defecto, puedes animar elementos internos:

details[open] div {
 transition: opacity 0.3s ease;
 opacity: 1;
}

Integración en FAQ y tablas

Los <details> funcionan excelente para preguntas frecuentes o fichas de producto.

Accesibilidad y buenas prácticas

• <summary> siempre debe ser el primer elemento hijo.
• Evita meter demasiados elementos interactivos dentro del <summary> (links, inputs).
• Asegura contraste suficiente si lo estilizas.
• La navegación por teclado funciona en la mayoría de navegadores modernos.
• Safari aún no incluye <summary> en el orden de tabulación de forma estándar.

Compatibilidad con navegadores y problemas frecuentes

En tu artículo comentabas que Firefox no soportaba <details>. Eso fue cierto hace años, pero a partir de 2020, Firefox, Chrome, Edge y Safari lo soportan, aunque:

• Safari tiene problemas con foco.
• Algunos navegadores antiguos no permiten estilizar ::marker.
• El contenido oculto puede ser indexado o no según navegador.

Si necesitas compatibilidad total, puedes usar un polyfill muy ligero o mantener una versión fallback basada en CSS.

Comparativa: acordeón HTML nativo vs soluciones con JavaScript

• Rendimiento
  • HTML nativo siempre será más ligero.
• Mantenibilidad
  • Menos código = menos errores.
• Accesibilidad
  • Los <details> ya vienen accesibles de fábrica.
• Cuándo usar cada uno
  • HTML nativo: desplegables simples, FAQ, paneles ligeros, menús secundarios.
  • JavaScript: cuando necesitas animaciones complejas, sincronización de estados o integración con formularios avanzados.

Preguntas frecuentes (FAQ)

• ¿Puedo usar <details> como acordeón sin JavaScript?
  • Sí, incluso puedes crear acordeones exclusivos con el atributo name.
• ¿Cómo hago que inicie abierto?
  • Usa el atributo booleano open.
• ¿Puedo cambiar la flecha que aparece por defecto?
  • Sí, con ::marker, ::before o eliminando el marcador nativo.
• ¿Es accesible?
  • En general, sí. Aunque Safari aún tiene limitaciones en el focus.
• ¿Afecta al SEO que el contenido esté oculto?
  • No suele ser problema. Los buscadores sí leen el contenido, aunque algunos navegadores no lo incluyen en ciertas búsquedas internas.

Conclusiones

Las etiquetas <details> y <summary> son pequeños tesoros escondidos en HTML. Cuando las descubrí, dejé de añadir librerías innecesarias solo para mostrar contenido desplegable, y desde entonces las uso cada vez que quiero una solución ligera, semántica y accesible.

Además, con un poco de CSS puedes convertirlas en acordeones, menús, paneles informativos y hasta indicadores visuales elegantes.

En definitiva es un elemento provisto en HTML de lo más curioso y un poco desconocido que puede tener múltiples posibilidades al momento de estar maquetado HTML y CSS y esperemos que pronto la gente de Mozilla decida incorporar el soporte en próximas versiones de su navegador.