Elementos interactivos

Detalles <details>

La etiqueta <details> permite mantener oculta una parte de la página web, que el usuario puede hacer visible u ocultar de nuevo haciendo clic en un icono con forma de triángulo.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<p>En la película de 1968 ... </p>

<details>
  <summary>Spoiler</summary>
  <p>En la escena final, el protagonista encuentra ... </p>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

El atributo open hace que el contenido de <details> se muestre cuando se carga la página, aunque se pueda ocultar posteriormente.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<p>Formulario de registro</p>

<details open>
  <summary>Datos personales</summary>
  <p>Nombre: <input type="text" name="nombre"></p>
</details>

<details open>
  <summary>Datos profesionales</summary>
  <p>Empresa: <input type="text" name="empresa"></p>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

Resumen <summary>

El elemento <summary> se incluye dentro de un elemento <details> y contiene la parte del contenido que está siempre visible y sobre la que también se puede hacer clic para mostrar el resto del contenido, como muestran los ejemplos del apartado anterior.


Si no se incluye el elemento <summary>, los navegadores muestran el texto "Detalles".

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<p>Berners-Lee creó el HTML basándose en SGML. La IETF publicó la norma RFC 1866 en 1995 y el W3C publicó la recomendación HTML 3.2 en 1997.</p>

<details>
  <ul>
    <li>HTML: HyperText Markup Language</li>
    <li>SGML: Standard Generalized Markup Language</li>
    <li>IETF: Internet Engineering Task Force</li>
    <li>W3C: World Wide Web Consortium</li>
  </ul>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

El icono que muestra el elemento interactivo <summary> de <details> se puede establecer con las propiedades de lista, como se comenta la lección CSS Listas.

Ventana de diálogo <dialog>

La etiqueta <dialog> permite definir el contenido de una ventana de diálogo modal (independiente de la página web). Para mostrar la ventana, se debe establecer el atributo open.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<dialog id="dialog-1">
  <h1>Ventana de diálogo</h1>

  <p>Esto es un ejemplo de ventana de diálogo</p>

  <input type="button" value="Cerrar" onclick="document.getElementById('dialog-1').removeAttribute('open')">
</dialog>

<p>
  <input type="button" value="Muestra diálogo" onclick="document.getElementById('dialog-1').setAttribute('open', 'open')">
</p>
ERROR (no puede mostrarse el objeto)
Enlace externo