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.
<p>En la película de 1968 ... </p>
<details>
<summary>Spoiler</summary>
<p>En la escena final, el protagonista encuentra ... </p>
</details>
El atributo open hace que el contenido de <details> se muestre cuando se carga la página, aunque se pueda ocultar posteriormente.
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".
<p>Berners-Lee creó el HTML basándose en el 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>
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.
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.
<dialog id="dialog-1">
<h1>Ventana de diálogo</h1>
<p>Esto es un ejemplo de ventana de diálogo</p>
<p>
<input type="button" value="Cerrar" onclick="document.getElementById('dialog-1').removeAttribute('open')">
</p>
</dialog>
<p>
<input type="button" value="Muestra diálogo" onclick="document.getElementById('dialog-1').setAttribute('open', 'open')">
</p>