Etiquetas HTML interactivas

A partir de HTML5, existen algunas etiquetas que proporcionan características interactivas a una página. En dichas etiquetas el usuario debe tomar parte de forma activa para activarlas o utilizarlas. Elementos desplegables, menús contextuales, diálogos emergentes, etc...

Veamos una lista de dichas etiquetas:

Etiqueta Descripción
<details> Crea un elemento desplegable. Etiqueta que contiene todo el contenido del elemento.
<summary> Título del desplegable que aparece siempre, se encuentre desplegado o no.
<dialog> Ventana de diálogo que puede contener y mostrar cierta información.

Elementos desplegables

Con la etiqueta <details> se puede crear un elemento desplegable que el usuario puede expandir o contraer para ver más información. Se trata de una etiqueta contenedora que actúa como un <div>, salvo que todo el contenido de esta etiqueta no se muestra inicialmente. En su lugar, aparece una flecha y el texto proporcionado en la etiqueta <summary> (o el texto «Detalles» si se omite).

<details>
  <summary>Más información</summary>
  <h2>Nombre del sujeto</h2>
  <img src="foto.jpg" alt="Foto del sujeto" />
</details>

Si pulsamos sobre el texto o la mencionada flecha, el contenido de la etiqueta <details> se muestra o se oculta, dependiendo de si se encontraba oculto o visible respectivamente. La etiqueta <details> tiene un atributo open, que si se especifica el contenido es visible por defecto.

Esta etiqueta pertenece a HTML5.1 y aún no está soportado por la mayoría de navegadores.

Diálogos emergentes

HTML5.1 incorporará los denominados diálogos emergentes, o lo que es lo mismo, ventanas emergentes compatibles con código HTML que podemos utilizar y personalizar para realizar avisos o alertas al usuario. Hasta ahora, la forma más simple de crear avisos o alertas emergentes era recurrir al alert de Javascript o crear ventanas personalizadas desde Javascript. Sin embargo, con HTML5.1 podremos crear desde HTML sencillos o complejos diálogos con texto, botones, imágenes, video o cualquier elemento HTML que se nos ocurra.

La forma de crear diálogos es muy sencilla. Utilizaremos la etiqueta <dialog> y en su interior colocaremos toda la información que queramos mostrar en la ventana:

<dialog id="ms">
  <p>¡Hola, soy un mensaje!</p>
  <button id="close" onclick="document.getElementById('ms').close()">Ok!</button>
</dialog>
<button id="show" onclick="document.getElementById('ms').show()">Mostrar</button>

En este caso, estamos creando una ventana de diálogo con un párrafo de texto y un botón para cerrar la ventana. Fuera de ella, un botón para mostrar el diálogo. La etiqueta <dialog> puede tener el atributo open para indicar que la ventana debe estar abierta por defecto. En caso contrario, no se muestra inicialmente.

Diálogos modales

En programación, una ventana modal es un tipo de ventana que se muestra al usuario, generalmente para avisarle de algo o pedirle una información necesaria para continuar. Se caracteriza en que una vez se muestra, no se le permite realizar otra tarea hasta que atienda el mensaje de esa ventana modal (pulsar ok, responder una pregunta, etc...).

Para crear una ventana modal sólo tendremos que usar la función showModal() desde Javascript, en lugar de utilizar la función show() que utilizamos en el ejemplo anterior:

<dialog id="ms">
  <h2>¡Vuelve a la sombra!</h2>
  <img src="gandalf.jpg" alt="Gandalf" />
  <p>¡NO.. PUEDES... PASAR!</p>
  <button id="close" onclick="document.getElementById('ms').close()">Ok!</button>
</dialog>
<button id="show" onclick="document.getElementById('ms').showModal()">Mostrar</button>

Esto mostrará la siguiente ventana de diálogo modal:

Diálogo modal con HTML5

Obsérvese que hemos utilizado la pseudoclase CSS ::backdrop sobre la ventana de diálogo para darle estilos a la parte de detrás de la ventana modal, pudiendo, por ejemplo, aplicarle un color de fondo negro con transparencia al 25% con la propiedad background-color:RGBA(0,0,0, .75):

#ms::backdrop {
  background-color: RGBA(0, 0, 0, 0.75);
}

Las ventanas de diálogo de HTML5.1 aún son muy recientes y el soporte no está muy extendido entre los diferentes navegadores del panorama web:

Atributo contentEditable

En HTML5 podemos utilizar el atributo contentEditable sobre cualquier elemento para darle al usuario capacidades de edición sobre el mismo. De esta forma, podemos incluir el atributo contentEditable a una etiqueta <p> de párrafo, o a una etiqueta <h3>, por ejemplo, lo que permitirá al usuario que, al pulsar sobre dichos elementos, pueda modificar el texto que aparece:

<h3 contenteditable>Título del artículo</h3>
<div contenteditable>
  <p>Este es un párrafo de ejemplo del ejemplo en cuestión.</p>
  <p>Con él se pretende mostrar el funcionamiento del atributo contentEditable.</p>
</div>

De esta forma, podemos dotar de capacidades de edición al usuario. Obsérvese siempre que el HTML, CSS y Javascript son tecnologías que trabajan en el front-end, o lo que es lo mismo, son descargadas desde el alojamiento web y transferidas a una carpeta temporal de nuestro sistema. En ella, el navegador la lee y ahí es donde estamos realizando dichas modificaciones.

Si el usuario volviese a recargar la página tras modificar ciertos elementos, los cambios no se verán reflejados. Para ello, hay que hacer ciertas operaciones (por ejemplo, mediante Javascript o con un botón de Guardar cambios), y realizar una petición al backend del alojamiento web para que guarde los cambios.

Atributo hidden

HTML5 incorpora también un atributo hidden mediante el cuál podemos hacer desaparecer visualmente un elemento HTML (y todo su contenido, si es una etiqueta contenedora). Hasta ahora, para realizar esta tarea teníamos que recurrir a CSS, ya que se trata de una cuestión de presentación visual. Sin embargo, la diferencia entre el atributo hidden o utilizar estilos es que mediante CSS podemos mostrar elementos dependiendo de acciones del usuario o del medio en el que estén (media queries, por ejemplo).

Por otro lado, el attributo hidden se propone utilizarse cuando el usuario ha realizado una acción y hay una serie de elementos que queremos ocultar porque ya no son relevantes, independientemente de los estilos que se estén aplicando en la página:

<div id="info" hidden>Información</div>
<button onClick="toggleHidden('#info')">
  Mostrar/ocultar información
</button>

En el caso anterior, tenemos un <div> con texto que vamos a ocultar cada vez que el usuario pulse el botón. Dicho botón ejecuta la función Javascript toggleHidden() para ocultar o mostrar el elemento, dependiendo si ya estaba visibile o si estaba oculto:

function toggleHidden(selector) {
  element = document.querySelector(selector);
  element.hidden = element.hidden ? false : true;
}

El soporte de este atributo es completo en la mayoría de los navegadores:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.