Cómo usar correctamente las etiquetas <details> y <summary> de HTML
- Aprende cómo usar correctamente las etiquetas <details> y <summary> de HTML
- ¿Qué son las etiquetas <details> y <summary> y cómo se usan?
- ¿Para qué sirven las etiquetas <details> y <summary>?
- Ventajas y desventajas de <details> y <summary>, ¿cuáles son los mejores casos para usarlas?
- ¿Las etiquetas <details> y <summary> afectan al SEO de la página web?
Aprende cómo usar correctamente las etiquetas <details> y <summary> de HTML
Las etiquetas HTML <details> y <summary> son una forma de crear elementos desplegables en una página web. Puede ser un menú, una pregunta que muestra su respuesta al hacer click en ella o toda una sección entre otros.
Con estas dos etiquetas podemos mostrar u ocultar contenido en un mismo espacio sin tener que ocupar demasiado espacio en la pantalla. Solo muestra el título o la pregunta y el resto del contenido está plegado, escondido, hasta que se hace click y se despliega, mostrando todo el contenido.
Es muy interesante conocer en detalle qué son, para qué sirven y cómo se usan, de esta forma, las páginas web tendrán más contenido ocupando menos espacio y los ususarios disfrutarán de una página web más ordenada y clara, mejorando la experiencia de usuario.
¿Qué son las etiquetas <details> y <summary> y cómo se usan?
Estas dos etiquetas suelen ir juntas.
La estructura de este elemento es:
- Primero se abre la etiqueta <details>
- El primer elemento de <details> es la etiqueta <summary>, que tiene etiqueta de apertura y de cierre, y contiene el texto que va a estar visible en todo momento y donde el usuario podrá hacer click para desplegar el contenido
- Inmediatamente después viene el contenido que está plegado y se desplegará al hacer click en <summary>, puede ser cualquier elemento HTML como por ejemplo un párrafo, un div, una lista, una tabla, una imagen etcétera
- Para terminar, se cierra la etiqueta </details>
Un ejemplo de las etiquetas <details> y <summary>:
<details> // abre la etiqueta details
<summary>¿Cómo funciona la etiqueta "details"?</summary> // el summary es lo que el usuario va a leer y recibir el click del ratón para desplegar el contenido
<p>Se despliega el contenido y lo muestra al usuario. Y también una foto.</p> // el contenido puede ser cualquier elemento
<img src="gato negro jugando.webp" title="Imagen de ejemplo" alt="Foto de un gato">
</details> // cierra la etiqueta details
¿Cómo funciona la etiqueta "details"? Haz click aquí para verlo
Se despliega el contenido y lo muestra al usuario. Y también una foto.
En resumen, la etiqueta <details> se utiliza para envolver el contenido que queremos mostrar u ocultar en el desplegable, mientras que la etiqueta <summary> se utiliza para crear el área que, al hacer click, activa el desplegable.
Es importante mencionar que la etiqueta <summary> debe estar dentro de la etiqueta <details>.
Es posible hacer que el contenido esté desplegado, a la vista desde el principio. Para eso solo hay que añadir el atributo open a <details>:
<details open> // se ha añadido el atributo "open" para que el contenido esté desplegado desde el principio
<summary>Este elemento está desplegado cuando la página web se carga</summary> // el elemento "sumary" tiene el mismo comportamiento, al hacer click se pliega o despliega el contenido
<p>Se despliega el contenido al hacer click y lo muestra al usuario.</p> // el contenido está desplegado desde el principio, desde que la página web se carga
</details> // se cierra details
Este "details" está desplegado porque tiene el atributo "open", haz click aquí para cerrar y abrir
Se despliega el contenido y lo muestra al usuario. Y también una foto.
¿Para qué sirven las etiquetas <details> y <summary>?
Las etiquetas <details> y <summary> muestran información adicional que no es esencial en una página web. Al usar las etiquetas <details> y <summary>, el contenido puede ser ocultado y presentado al usuario solo cuando se hace clic en un botón o enlace, lo que permite que la página tenga una apariencia más ordenada y organizada.
Los usuarios pueden elegir ver el contenido adicional solo si les interesa, lo que a su vez reduce el desorden en la página. Por ejemplo, podemos utilizarlas para mostrar definiciones de términos, instrucciones de uso, preguntas frecuentes, entre otras cosas.
Un ejemplo muy común del uso de las etiquetas <details> y <summary> es en una sección de preguntas frecuentes. Podemos mostrar una lista de preguntas y respuestas cortas, y utilizar las etiquetas <details> y <summary> para mostrar la respuesta completa cuando el usuario haga clic en la pregunta que le interesa.
Otro ejemplo de uso es en una página de productos, donde podemos utilizar estas dos etiquetas para mostrar información adicional de cada producto cuando el usuario haga clic en un botón de "más información".
Ventajas y desventajas de <details> y <summary>, ¿cuáles son los mejores casos para usarlas?
Las ventajas de utilizar las etiquetas <details> y <summary> son, principalmente, que permiten mostrar contenido adicional sin ocupar demasiado espacio en la pantalla, lo que mejora la experiencia del usuario. También son fáciles de implementar y personalizar utilizando CSS. Tambén, puedes elegir cuál o cuáles son las más importantes y hacer que estén desplegadas, mostrando el contenido desde el principio, con el atributo "open" en la etiqueta <details>.
Por otro lado, una desventaja potencial es que el contenido adicional no está visible de forma predeterminada, solo si está añadido el atributo "open" en el código, por lo que algunos usuarios pueden perderse información importante si no se dan cuenta de que hay contenido adicional disponible. Además, algunos navegadores antiguos pueden no ser compatibles con estas etiquetas, aunque este problema es poco común.
¿Las etiquetas <details> y <summary> afectan al SEO de la página web?
La etiqueta <details> y su respectiva etiqueta <summary> son elementos relativamente nuevos en HTML5. En principio, pensando en el código, no mejoran ni empeoran el SEO, pero si pensamos en la experiencia del usuario, el uso de <details> y <summary> mejora la experiencia de usuario facilitando la navegación por la página web al ahorrar espacio y no sobrecargar al usuario con demasiados textos. Para los motores de búsqueda, la experiencia de usuario es importante y un factor que tienen en cuenta para posicionar una página web, por lo que usar las etiquetas <details> y <summary> mejora el posicionamiento en los motores de búsqueda.
Es importante recordar que el SEO no solo se trata de contenido y palabras clave, sino también de la experiencia del usuario. Si los visitantes de la página encuentran que es fácil de usar y que la información es fácil de encontrar, es más probable que pasen más tiempo en la página y regresen en el futuro.