Sencillo post para repasar la etiqueta summary HTML5, dicha nueva etiqueta tiene como funcionalidad añadir un sumario en la etiqueta details que a su vez muestra información complementaria y/o adicional de un elemento de la web.
El comportamiento de la etiqueta details HTML5 es como la de un widget que muestra y oculta información (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.
Otras etiquetas HTML5 interactivas con funciones similares son:
Sintaxis de etiqueta summary HTML5
Vamos con la sintaxis de este elemento HTML5 extraída de su web oficial:
|
1 2 3 4 |
<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.
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):
|
1 2 3 4 |
<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 clickar en la flecha de la izquierda de la etiqueta summary para ver como se cierra y abre.
|
1 2 3 4 |
<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.
Con esta etiqueta nos podemos ahorrar varias líneas de código que anteriormente hacíamos con jQuery o lenguajes similares.