Etiquetas HTML interactivas

DETAILS Y SUMMARY

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.

Más información

Nombre del sujeto

Foto del sujeto

DIÁLOGOS EMERGENTES y VENTANAS MODALES

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:

¡Hola, soy un mensaje!

CONTENIDO EDITABLE

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

Título del artículo

Este es un párrafo de ejemplo del ejemplo en cuestión.

Con él se pretende mostrar el funcionamiento del atributo contentEditable.

ATRIBUTO HIDDEN

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