Etiqueta HTML `<details>`

La etiqueta <details> es uno de los elementos HTML5. Crea un widget de revelación y contiene detalles adicionales que el usuario puede abrir y ver. Por defecto, el contenido de la etiqueta no se muestra. Para mostrar el contenido, debes aplicar el atributo open. Un widget de revelación se presenta comúnmente con un pequeño triángulo que gira (o rota) para mostrar el estado abierto/cerrado.

La <summary> etiqueta establece el título visible, que, al hacer clic, abrirá/cerrará información adicional. Si no hay un encabezado, el navegador mostrará el encabezado "Más detalles" por defecto.

Sintaxis

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

Ejemplo de la etiqueta HTML `<details>`:

Etiqueta HTML <details>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de details

Ejemplo de la etiqueta HTML `<details>` colocada dentro de una etiqueta `<form>`:

Etiqueta HTML <details>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="action_form.php" method="get">
      <details>
        <summary>Departure airport:</summary>
        <input type="text" list="airports" name="airports" />
        <datalist id="airports">
          <option value="Birmingham">
          <option value="Cambridge">
          <option value="Oxford">
          <option value="Bangor">
        </datalist>
        <input type="submit" value="confirm" />
      </details>
    </form>
  </body>
</html>

Try it Yourself »

Atributos

Atributo	Valor	Descripción
open	open	Indica que la información en la etiqueta debe mostrarse inicialmente en forma expandida.

La etiqueta <details> también admite los Atributos Globales y los Atributos de Eventos.

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

css

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

También puedes personalizar el marcador de revelación utilizando el pseudo-elemento ::marker.

Práctica

¿Qué es cierto sobre la etiqueta HTML <details>?

La etiqueta HTML <details> genera una caja desplegable al hacer clic.La etiqueta HTML <details> puede tener botones dentro de ella.La etiqueta HTML <details> puede contener estilos CSS.La etiqueta HTML <details> no puede contener otros elementos HTML.

Etiqueta HTML <details> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <details>: ​

Resultado ​

Ejemplo de la etiqueta HTML <details> colocada dentro de una etiqueta <form>: ​

Atributos ​