HTML ofrece elementos que proporcionan cierta interactividad a una página web. Gracias a estos elementos de interacción es posible llevar un documento HTML a otro nivel, ya que con ellos se logra que el usuario tome parte de forma activa en la web; por ejemplo, puede mostrar y esconder elementos desplegables.
Estos elementos interactivos se publicaron a partir de HTML5. Con <details> es posible mostrar y esconder contenido desplegable o colapsable, y se puede acompañar del elemento <summary> para añadir un resumen. Con <dialog> se puede mostrar una ventana de diálogo con contenido.
| Elemento | Descripción |
|---|---|
<details> | Contenido desplegable |
<summary> | Resumen del contenido desplegable |
<dialog> | Cuadro de diálogo |
Contenido desplegable: elemento <details>
El elemento <details> permite representar una porción de contenido que permanecerá oculta y será mostrada cuando el usuario lo decida. Se trata de un elemento que fue pensado para implementar soporte nativo para contenido desplegable, sin tener que recurrir a JavaScript.
El contenido que por defecto aparecerá oculto debe ir entre las etiquetas <details> (de apertura) y </details> (de cierre). El navegador web mostrará una flecha hacia la derecha, donde se encuentra la palabra «Detalles» (por defecto) o el título que se haya definido con el elemento <summary>.
Ejemplo de código HTML con un elemento <details>:
<details>
<p>Tim Berners-Lee creó el lenguaje HTML para compartir información científica.</p>
</details>
Para ver el resultado, pulsa sobre la flecha o sobre la palabra «Detalles». Justo debajo aparecerá el texto contenido dentro del párrafo. Al volver a pulsar encima, el texto que apareció se volverá a esconder de forma automática.
Tim Berners-Lee creó el lenguaje HTML para compartir información científica.
Es posible anidar varios elementos <details> para formar un conjunto de contenidos desplegables, distribuidos de forma jerárquica. En el siguiente ejemplo se usan dos elementos anidados dentro del principal:
<details>
Contenido inicial.
<details>
Contenido de segundo nivel.
<details>
Contenido de tercer nivel.
</details>
</details>
</details>
Como resultado, hay que desplegar hasta tres veces para acceder al contenido de tercer nivel. Cuando están los tres niveles desplegados, es suficiente con volver a pulsar sobre el primero para que se escondan los tres a la vez.
Contenido inicial.Contenido de segundo nivel.Contenido de tercer nivel.
Además de texto, dentro del elemento <details> puede insertarse cualquier elemento de línea y de bloque, como pueden ser encabezados, imágenes, formularios o elementos multimedia.
El atributo ‘open’
Mediante el atributo open es posible que un contenido desplegable se muestre de forma automática tan pronto como se cargue el documento HTML. Se trata de un atributo binario, por lo tanto, su inclusión activa esta opción, mientras que su ausencia deja su valor por defecto, es decir, invisible.
Resumen del desplegable: elemento <summary>
Gracias al elemento <summary> es posible cambiar el título por defecto del elemento <details>, con el fin de proporcionar un título personalizado. Por tanto, la descripción provista por este elemento será mostrada a la derecha de la flecha y encima del contenido oculto cuando sea visible.
El elemento <summary> sólo puede contener elementos de línea, textuales o encabezados. El contenido debe ir entre las etiquetas <summary> (de apertura) y </summary> (de cierre). Este elemento debe ser el primer elemento hijo del elemento <details>, y carece de atributos específicos.
Ejemplo de código HTML combinando <details> y <summary>:
<details>
<summary>¿Quién creó el lenguaje HTML?</summary>
<p>Respuesta: Tim Berners-Lee.</p>
</details>
Dando como resultado:
¿Quién creó el lenguaje HTML?
Respuesta: Tim Berners-Lee.
Cuadro de diálogo: elemento <dialog>
El elemento <dialog> permite mostrar un cuadro de diálogo similar a una ventana. Este elemento fue introducido en HTML5 con el fin de implementar soporte nativo para una funcionalidad que se ha estado realizando mediante otras tecnologías, como JavaScript. Los cuadros de diálogo han sido utilizados en programas de escritorio durante muchos años por su alta utilidad.
La creación de un elemento <dialog> es tan simple como colocar todos los elementos que se desee dentro de sus dos etiquetas: <dialog> (de apertura) y </dialog> (de cierre). No obstante, el funcionamiento correcto de este elemento requiere código JavaScript, gracias al que se le dará interactividad.
Ejemplo de código HTML con una ventana de diálogo:
<dialog id="Dialog">
<p>Esto es un ejemplo de ventana de diálogo.</p>
<button id="Hide">Cerrar</button>
</dialog>
<button id="Show">Mostrar cuadro de diálogo</button>
En este ejemplo se ha optado por insertar un párrafo y un botón dentro del cuadro de diálogo. Pero como ya se ha dicho, por sí sólo no es funcional. Para darle interactividad se ha asignado el atributo id (identificador único), así es posible identificar los elementos y asignarles funciones.
Con el siguiente código JavaScript se añade una función para abrir y cerrar el cuadro de diálogo. Ahora mismo no es necesario conocer JavaScript, pero su aprendizaje es muy recomendado en el mundo del desarrollo web.
(function() {
var dialog = document.getElementById('Dialog');
var show = document.getElementById('Show');
var hide = document.getElementById('Hide');
show.onclick = function() {
dialog.show();
};
hide.onclick = function() {
dialog.close();
};
})();
Resultado de la combinación de ambos códigos:
Se puede observar que el cuadro de diálogo tiene un diseño que no es nada bonito y aparece justo donde ha sido reclamado. Por suerte, el diseño se puede modificar con ayuda del CSS. Mientras la ventana de diálogo está abierta se puede seguir interactuando con el resto del sitio web.
El atributo ‘open’
El elemento <dialog> también puede hacer uso del atributo binario open. Gracias a este atributo, el cuadro de diálogo se mostrará por defecto y de forma automática justo cuando el navegador web haya cargado el documento HTML. El usuario no tendrá que hacer nada para que se muestre.
