A partir de HTML5 existen algunas etiquetas que proporcionan características interactivas a la página.

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.
<menu> Crea un tipo de menú que contendrá una serie de opciones.
<menuitem> Cada ítem del menú contenedor.
<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.

Menús de opciones

Con la etiqueta <menu> se pueden crear menus de opciones, consiguiendo un mayor grado de personalización sobre nuestra página. Cada etiqueta <menu> contendrá una serie de etiquetas <menuitem> para hacer referencia a cada opción del menú.

Atributos del menú Valor Descripción
type context Crea un menú de tipo contextual (botón derecho sobre una zona de la página).
toolbar Crea un menú de tipo barra de herramientas.
label nombre Nombre del menú contextual si es un submenú anidado.

El valor por defecto del atributo type es context si tiene una etiqueta <menu> padre de tipo context, o toolbar en caso contrario. Por otra parte, tenemos los atributos del elemento <menuitem>:

Atributos del item Valor Descripción
type command La opción del menú será un comando que realizará una acción al ser pulsado.
checkbox La opción del menú podrá ser marcada o desmarcada (casillas de verificación).
radio La opción del menú formará parte de un grupo y sólo una podrá ser marcada.
label nombre Indica la etiqueta de la opción del menú.
icon URL Indica la ruta/imagen que utilizará como icono para la opción del menú.

Menú contextual

Con el par de etiquetas <menu> y <menuitem> es posible crear menús contextuales, de los que aparecen cuando hacemos clic con el botón derecho del ratón sobre una zona de la página, o cuando pulsamos la tecla de menú contextual de nuestro teclado (si la tiene). Para ello, en primer lugar debemos añadir el atributo contextmenu en el elemento donde queremos activar el menú contextual. Como valor, posteriormente colocaremos el id que tendrá el menú que aparecerá:

<div>
  <h1>Experimento</h1>
  <img src="sad-dog.jpg" alt="Sad dog" contextmenu="powermenu">
</div>

<menu type="context" id="powermenu">
  <!-- Opciones del menú -->
  <menuitem label="Rotar" onClick="rotate()" icon="rotate-icon.png">
  <menuitem label="Redimensionar" onClick="resize()" icon="resize-icon.png">
  <!-- Submenú -->
  <menu label="Filtros">
    <!-- Opciones del submenú -->
    <menuitem label="Escala de grises" onClick="filter('grayscale')">
    <menuitem label="Negativo" onClick="filter('invert')">
    <menuitem label="Sepia" onClick="filter('sepia')">
  </menu>
</menu>

Como vemos, hemos creado un menú al que le hemos colocado 2 opciones (rotar y redimensionar) y un submenú (filtros) que a su vez tiene tres opciones en su interior. Nótese que hemos indicado con el atributo icon el nombre de la imagen a utilizar como icono, sin embargo, actualmente esa opción no está soportada por los navegadores aún.

Finalmente, mediante el evento onClick, se le puede asociar una función Javascript que realice alguna acción, algo que veremos más adelante.

Menu y menuitem de HTML5

A la derecha tenemos otro ejemplo, donde vemos como podemos desactivar casillas con el atributo disabled, establecer opciones marcables/desmarcables como las casillas de verificación y establecer opciones en grupo mediante el atributo radiogroup donde sólo puedes marcar una sola, como los botones radio. Si queremos marcar algún <menuitem> por defecto, simplemente utilizamos el atributo checked:

<div id="box" contextmenu="powermenu"></div>

<menu id="powermenu" type="context">
  <menuitem label="Opción 1">
  <menuitem label="Opción 2" disabled>
  <hr>
  <menuitem type="checkbox" label="Casilla 1">
  <menuitem type="checkbox" label="Casilla 2" checked>
  <hr>
  <menuitem type="radio" radiogroup="img" label="Opción 3" checked>
  <menuitem type="radio" radiogroup="img" label="Opción 4">
  <hr>
  <menu label="Más opciones">
    <menuitem type="command" command="submitbutton" label="Enviar" onClick="alert('Test!')">
  </menu>
</menu>

Desgraciadamente, estos menús se tratan de características propias de HTML5.1 y aún apenas tienen soporte parcial en navegadores, pero sin duda, nos permitirán realizar menús de opciones personalizados de una forma muy sencilla:

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, .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>
<p contentEditable>Este es un párrafo de ejemplo del ejemplo en cuestión. Con él se pretende mostrar el funcionamiento del atributo contentEditable.</p>

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(sel) {
  elem = document.querySelector(sel)
  elem.hidden = elem.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. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).