Etiqueta <details> HTML5:

Mostrar información complemetaria sobre

un elemento del DOM
Esta etiqueta tiene como funcionalidad ofrecer y mostrar
información complementaria y/o adicional de un elemento de la
web.

Su comportamiento es como la de un widget que muestra y oculta

información (Como un menú con efecto acordeón). Un ejemplo
sería las especificaciones técnicas de un producto en el típico
carrito de la compra.

La etiqueta <details> sólo está soportado en Chrome y Safari en el

mac.

Sintaxis de etiqueta details HTML5:

<details>
<summary>Sumario explicativo</summary>
<p>Datos y texto, Datos y texto, Datos y texto, Datos y texto</p>
</details>

Tal y como podéis ver la sintaxis es sencilla, en muchas ocaciones

se usa la etiqueta <summary> para añadir un título informativo del
contenido a mostrar.

Sintaxis de etiqueta summary HTML5:

<details>
<summary>Sumario explicativo</summary>
<p>Datos y texto, Datos y texto, Datos y texto, Datos y texto</p>
</details>

Tal y como podéis ver la sintaxis es sencilla y podemos ver como se

complementa con la etiqueta details añadiendo un título
informativo.

Con summary damos más enfasis a todo el contenido que se

muestra dentro de details y ayuda al usuario a identificar de manera
eficaz dicho contenido.
 La etiqueta <details> y otras etiquetas similares en HTML5:

Existe el Atributo open (Opcional) que sirve para mostrar

la etiqueta details abierta por defecto. Su código es el siguiente:

<details open="open"></details>

Ejemplos de la etiqueta summary HTML5:

Aprovechamos el ejemplo de la etiqueta details para que podáis ver
su funcionamiento de <summary> (Probado en Chrome):

<details open="open">
<summary>Colores RGB</summary>
<p>Los colores RGB son el rojo, verde y azul.</p>
</details>

En este primer ejemplo podéis ver que la etiqueta <details> se

muestra abierta por defecto gracias al atributo open. Probad a
hacer clic en la flecha de la izquierda de la etiqueta
<summary> para ver cómo se cierra y abre.

<details>
<summary>Colores RGB</summary>
<p>Los colores RGB son el rojo, verde y azul.</p>
</details>

Mientras que en este otro ejemplo la etiqueta se muestra cerrada

por defecto.

Otras etiquetas HTML5 interactivas con funciones similares son:

 <menu>
 <command>
 <dialog>

2
 Alfredo Herraiz Naranjo

Etiqueta <menu> HTML5:

Determinar un menú de comandos
Esta etiqueta tiene como finalidad especificar/determinar una serie
de comandos a ser ejecutados por el usuario.

No confundir con la etiqueta <nav> cuyo fin es el de contener

enlaces para navegar por la web (menú de navegación), mientras
que menu HTML5 puede servir como barra de herramientas
conteniendo acciones, funciones o comandos a ejecutar en la web.

Sintaxis de la etiqueta menu HTML5:

<menu type="" label="">
<command type="" label=""></command>
<button>...</button>
</menu>

Explicación de la sintaxis:

 La etiqueta menu consta de su apertura y cierre <menu> y

</menu>.
 Puede contener varias etiquetas command o button para
cada accción y comandos a ejecutar.
Los atributos válidos son:

 type: Para especificar el tipo de menú a mostrar, sus valores

pueden ser toolbar, context y popup.
 label: Especifica un título al menú.

Ejemplos de la etiqueta menu HTML5;

Vamos a ver una serie de ejemplos de la etiqueta menu
HTML5 para ver sus diferentes funcionalidades:

<menu type="context" id="menu1">

<command label="Recargar la página1"
onclick="window.location.reload();"></command>
</menu>

3
 La etiqueta <details> y otras etiquetas similares en HTML5:

<menu type="toolbar" id="menu2">

<button label="Recargar la página2"
onclick="window.location.reload();"></button>

</menu>
<menu type="popup" id="menu3">
<command label="Recargar la página3"
onclick="window.location.reload();"></command>
</menu>

De esta manera en estos 3 ejemplos vemos cómo recargar la

página web desde los 3 posibles estados de la etiqueta menu:
toolbar, context y popup con la ayuda de las etiquetas command y
button.

Etiqueta <command> HTML5:

Definir botones de comandos
Con esta etiqueta podemos definir botones que accionan comandos
en nuestra página web.

Sintaxis de la etiqueta command HTML5:

<menu>
<command type="" label=""></command>
</menu>

Explicación de la sintaxis:

 La etiqueta command se situa dentro de una etiqueta menu.

 El atributo type puede tener los siguientes valores:
– command: Comando a ejecutarse.
– checkbox: Comando a seleccionar mediante un checkbox.
– radio: Comando a seleccionar mediante un radio button.
 label: Proporciona un nombre al comando.
 icon: Proporciona una imagen al comando.
 disabled: Indica que el comando está deshabilitado.

4
 Alfredo Herraiz Naranjo

 checked: En caso de seleccionar el type checkbox con este

atributo podemos dejarlo seleccionado por defecto.
 radiogroup: Proporciona el nombre del grupo de radio buttons,
se usa en caso de elecgir el type radio.

Ejemplos de la etiqueta command HTML5:

<menu type="toolbar">
<command type="radio" radiogroup="colores" checked="checked"
label="Rojo" icon="rojo.png" onclick="alert('Color rojo');">

<command type="radio" radiogroup="colores" label="Azul"

icon="azul.png" onclick="alert('Color Azul');">

<command type="radio" radiogroup="colores" label="Verde"

icon="verde.png" onclick="alert('Color Verde');"
disabled="disabled">
</menu>

En el ejemplo superior he usado 3 etiquetas command de tipo

radio dentro de una etiqueta menu:

 En la primera uso los atributos radiogroup, label, icon y

onclick para ejecutar un comando. Con el
atributo checked=”checked” estoy seleccionando por defecto
la etiqueta.
 En la segunda mismos atributos pero sin estar seleccionada
por defecto.
 En la tercera lo mismo pero con el
atributo disabled=”disabled”, de esta manera no se pordrá
ejecutar su acción.

Vamos con otro ejemplo:

<menu type="toolbar">
<command type="command" label="Saca mensaje"
icon="alert.png" onclick="alert('Mensaje por pantalla');">
</menu>

5
 La etiqueta <details> y otras etiquetas similares en HTML5:

En este otro ejemplo he usado usado el type command con un

label, un icono para que la acción sea sacar un mensaje por
pantalla.

Etiqueta <dialog> HTML5:

Mostrar cuadros de diálogo por pantalla
Esta etiqueta tiene como funcionalidad mostrar mensajes por
pantalla dentro de unos cuadros de dialogo similares a los mensajes
que se muestran con alert.

Sintaxis de la etiqueta dialog HTML5:

<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:

<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>

Explicación del ejemplo anterior 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.