Etiqueta dialog HTML5: Mostrar cuadros de diálogo por pantalla

Vamos a repasar la etiqueta dialog HTML5, tiene como funcionalidad mostrar mensajes por pantalla dentro de unos cuadros de dialogo similares a los mensajes que se muestran con alert.

Otras etiquetas HTML5 interesantes son:

• summary
• details
• mark
• hgroup

Sintaxis de la etiqueta dialog HTML5

Veamos la sintaxis de este elemento HTML5 extraída de su web oficial:

<dialog open>Esto es un cuadro de diálogo en HTML5</dialog>

Tal y como se aprecia en el código superior la sintaxis es sencilla, repasemos el atributo que podemos usar en esta etiqueta:

• open (Opcional): Con el atributo open el cuadro de diálogo está activo.

Ejemplos de la etiqueta dialog HTML5

Para terminar vayamos con 2 ejemplos prácticos de la etiqueta dialog:

<dialog open><p>Esto es un cuadro de diálogo en HTML5 con atributo open</p></dialog>

<dialog><p>Esto es un cuadro de diálogo en HTML5 sin el atributo open</p></dialog>

Os explico el ejemplo superior visualizado en Google Chrome:

• Tenemos 2 etiquetas dialog HTML5.
• Una de ellas con atributo open.
• Solo se muestra la que tiene el atributo open ya que indica que está activo el cuadro de diálogo.