Etiqueta HTML `<summary>`

La etiqueta <summary> se utiliza para definir el encabezado visible del elemento <details>. Al hacer clic en el encabezado, el usuario puede ver u ocultar la información.

El elemento <summary> siempre debe ser el primer elemento dentro de una etiqueta <details>. Al hacer clic en el resumen, el elemento padre <details> se abre o cierra. Luego, se envía el evento toggle a <details>, lo cual se puede usar para informarte cuándo ocurre el cambio de estado. Puedes escuchar este evento con JavaScript:

document.querySelector('details').addEventListener('toggle', (e) => {
  console.log('Details is now', e.target.open ? 'open' : 'closed');
});

Si el primer hijo del elemento <details> no es un elemento <summary>, se utilizará una cadena predeterminada como etiqueta de la caja de revelación.

El estilo predeterminado para las etiquetas <summary> contiene la propiedad CSS display con el valor “list-item”, lo que permite cambiar el icono que se muestra como widget de revelación. Si deseas eliminar el triángulo de revelación, puedes usar display: block.

La etiqueta <summary> es uno de los elementos de HTML5.

Sintaxis

La etiqueta <summary> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<summary>) y cierre (</summary>).

Ejemplo de la etiqueta HTML `<summary>`:

Etiqueta HTML <summary>

html

<!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>

Try it Yourself »

Resultado

ejemplo de summary

Atributos

La etiqueta <summary> admite Atributos Globales y los Atributos de Eventos.

Cómo dar estilo a una etiqueta HTML <summary>

css

summary {
  color: blue;
  list-style: none; /* Hides the disclosure triangle */
}

Práctica

¿Cuál es el propósito de la etiqueta `<summary>` en HTML?

Se utiliza para crear un resumen que se mostrará en un navegador solo si el elemento `<details>` está cerrado.Proporciona asistencia visual para la navegación del sitio web.Se utiliza para especificar metainformación dentro de la página web.Se utiliza junto con la etiqueta `<details>` para permitir que el contenido sea colapsable o expandible según la preferencia del usuario.

Etiqueta HTML <summary> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <summary>: ​

Resultado ​