En este capítulo vamos a ver algunas etiquetas que nos pueden dar ciertos elementos interactivos.
Botones
Uno de ellos son los botones, a los que para dotarlos de interactividad vamos a necesitar de la ayuda de Javascript, que es el lenguaje de programación de la web.
Veamos un ejm sencillo de como utilizar botones junto con eventos Javascript.
Ejm
<button onclick="alert('Hola Mundo')">Haz clic</button>
Acordeones
Otro de los elementos que crear cierta interactividad es la etiqueta <details></details>, que es como si fuera un acordeón. Su estructura sería la siguiente.
Ejm
<details> <summary>Título del acordeón</summary> <article> <h2>Título del contenido</h2> <p>Párrafo del contenido</p> </article> </detail>
Hay un atributo denominado open, que lo que hace es que deja abierto el acordeón, se trata de un atributo booleano, de la siguiente manera.
<details open> ... Contenido </details>
Cajas de diálogo o ventanas modales
HTML de manera nativa nos permite crear ventanas modales, para ello dispone de una etiqueta denominada <dialog></dialog>, la cual, por defecto aparece oculta, para abrirla tenemos que hacer uso del atributo open, de la siguiente manera.
Ejm
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>Ventana modal</h1> <dialog id="mi-dialogo"> <h2>Título del diálogo</h2> <p>Párrafo del diálogo</p> <button id="cerrar-dialogo">Cerrar diálogo</button> </dialog> <button id="abrir-dialogo">Abrir diálogo</button> <script> // Creo variables const d = document, $miDialogo = d.getElementById("mi-dialogo"), $cerrarDialogo = d.getElementById("cerrar-dialogo"), $abrirDialogo = d.getElementById("abrir-dialogo"); $abrirDialogo.addEventListener("click", () => { $miDialogo.showModal(); }); $cerrarDialogo.addEventListener("click", () => { $miDialogo.close(); }); </script> </body> </html>
Se trata de una etiqueta experimental, por lo que está bien saber como evoluciona su uso desde por ejm, la página https://htmlreference.io/. También podemos ver su compatibilidad desde https://caniuse.com/.