¿Alguna vez te has encontrado con el elemento details en HTML? Se trata de una etiqueta que puede transformar tus páginas web al ayudarte a mantener la información accesible, limpia y organizada. Si quieres aprender más sobre qué es este elemento, para qué sirve y cómo puedes usarlo para mejorar el contenido de tu sitio web, en este artículo te lo contaremos.
¿Qué es el elemento details en HTML?
El elemento <details> es una etiqueta de HTML que sirve para crear contenido desplegable que los usuarios pueden mostrar u ocultar haciendo clic en un encabezado interactivo. Por ejemplo, cuando entras a una página web y haces clic en un menú desplegable para ver u ocultar determinada información, estás interactuando con un elemento <details>.
Este elemento es especialmente útil para organizar grandes cantidades de contenido en un espacio reducido, de manera que puedas crear páginas estéticamente agradables al tiempo que son accesibles para los usuarios, lo que sin duda mejorará su experiencia de navegación en tu sitio web.
Generalmente, el elemento <details> suele ir acompañado del elemento <summary>, que proporciona un resumen o título visible para el contenido desplegable. Dicho de otra forma, es el título o encabezado que siempre ves y en el que haces clic para abrir o cerrar el menú de <details>, como si se tratara de la etiqueta en el frente de un cajón que te dice qué hay dentro.
Para que puedas entenderlo mejor, vamos a imaginar que estás en una tienda en línea y estás viendo la descripción de un producto. La página puede tener algo como esto:
<details>
<summary>Más información del producto</summary>
<p>Este producto está hecho de materiales reciclables y viene con una garantía de 2 años...</p>
</details>Aquí, el elemento <summary> contiene “Más información del producto”, que es lo primero que ves y en lo que haces clic. Mientras, <p> hace referencia al párrafo dentro de <details> y es el texto con más detalles sobre el producto que se muestra cuando haces clic en “Más información del producto”.
Características principales del elemento details en HTML
Para entender un poco más sobre este elemento tan útil, debemos empezar por comprender sus principales características.
Interactividad nativa
El elemento <details> puede mostrar y ocultar el contenido de forma nativa en HTML, sin que tengas que utilizar JavaScript u otros scripts adicionales. La principal ventaja de esto es que simplifica el proceso de desarrollo y reduce la cantidad de código en la web, con lo que puedes mejorar la eficiencia y el rendimiento de la página, a la vez que ahorras tiempo y esfuerzo.
Solamente necesitas añadir el <details> y <summary>, para obtener una funcionalidad interactiva con poco esfuerzo.
Semántica clara
Usar los elementos <details> y <summary> hará una gran diferencia en la accesibilidad de tu página web, pues estos proporcionan un significado explícito y entendible para los navegadores y tecnologías de asistencia, como lectores de pantalla. Esto ayuda a los usuarios con discapacidades visuales a navegar y entender mejor el contenido de la página, ya que los lectores de pantalla pueden identificar que el contenido dentro de <details> es opcional y puede ser expandido o contraído según las necesidades del usuario.
Por otra parte, para otros desarrolladores es claro que el contenido es interactivo, de forma que pueden entender su propósito sin necesidad de leer comentarios o acudir a otro tipo de lógica externa.
Atributo open
El atributo open sirve para controlar el estado inicial del elemento <details>. Por ejemplo, si incluyes este atributo, el contenido del <details> se mostrará abierto por defecto cuando la página cargue. Esto puede servir para resaltar información importante que deseas que sea visible inmediatamente sin la necesidad de que el usuario interactúe primero con el elemento.
¿Para qué sirve el elemento details en HTML?
Como hemos mencionado, este elemento es muy útil y versátil, ya que puede aplicarse en diferentes escenarios de diseño web. Veamos a continuación algunos ejemplos de sus usos más comunes:
Preguntas frecuentes (FAQs)
Este elemento es perfecto para organizar las respuestas, de manera que los usuarios solo vean la información que necesitan pues, al hacer clic en una pregunta, pueden desplegar la respuesta correspondiente, mientras el resto se mantienen ocultas. Esto ayuda a mantener la página más ordenada y a mejorar la experiencia del usuario al permitirle acceder solo a la información que le interesa en ese momento.
<details>
<summary>¿Qué es HTML?</summary>
<p>HTML es un lenguaje de marcado utilizado para estructurar el contenido de las páginas web.</p>
</details>Documentación técnica
La documentación técnica suele contener grandes cantidades de información detallada, como fragmentos de código, explicaciones de configuraciones y pasos de instalación, por lo que puede resultar engorroso encontrar rápidamente la información relevante que buscas. Al utilizar <details>, puedes ocultar las secciones que no necesitas inmediatamente para mantener la página más ordenada y fácil de navegar.
<details>
<summary>Ver ejemplo de código</summary>
<pre>
<code>
<details>
<summary>Click para expandir</summary>
<p>Este es un ejemplo anidado.</p>
</details>
</code>
</pre>
</details>Secciones avanzadas en formularios
En muchas aplicaciones y páginas web, los formularios tienen las opciones básicas que la mayoría de los usuarios necesitan llenar, y otras opciones avanzadas con configuraciones adicionales que solo requieren algunos usuarios específicos. En estos casos, el elemento <details> permite ocultar estas opciones avanzadas para que no saturen el formulario con demasiada información, de manera que los usuarios que necesitan esas configuraciones pueden expandir la sección.
<details>
<summary>Configuraciones avanzadas</summary>
<p>Opciones adicionales para usuarios experimentados.</p>
</details>¿Cómo utilizar <details> y <summary> en tu código?
Además de ser muy útil, puedes implementar <details> de una forma simple y directa partiendo de la siguiente estructura básica:
<details>
<summary>Título visible</summary>
<p>Este contenido se despliega al hacer clic en el título.</p>
</details>Luego, tenemos algunos atributos útiles, por ejemplo:
Open
Como mencionamos anteriormente, este atributo define si el contenido de <details> está desplegado por defecto al iniciar la página.
<details open>
<summary>Abierto por defecto</summary>
<p>Este contenido aparece inicialmente visible.</p>
</details>Accesibilidad y personalización con CSS
El elemento <summary> en HTML tiene un estilo visual predeterminado que generalmente incluye un pequeño triángulo o flecha junto al texto del resumen y sirve para indicar el estado del contenido desplegable, mostrando si está abierto o cerrado.
Aunque <summary> viene con este estilo predeterminado, los desarrolladores pueden cambiar su apariencia utilizando CSS. Por ejemplo, puedes cambiar el color del texto, añadir efectos al pasar el cursor, o incluso, reemplazar el triángulo con otros íconos o gráficos.
summary {
cursor: pointer;
font-weight: bold;
}
details[open] summary::before {
content: "▼ ";
}
summary::before {
content: "► ";
}¿Por qué deberías aprender sobre details en HTML?
Ya hemos visto que el uso de la etiqueta details en HTML es de mucha utilidad porque nos permiten optimizar la experiencia de usuario y organizar mejor el contenido de nuestras páginas web. Además, es una excelente manera de aprovechar las capacidades de HTML sin depender tanto de JavaScript, lo que nos permite mantener el código más limpio y sencillo, mejorar el rendimiento del sitio web y mantener su funcionamiento a largo plazo.
¿Quieres continuar aprendiendo sobre details en HTML y otros elementos para diseñar tus propias páginas web? Únete al Bootcamp en Desarrollo Web de KeepCoding, donde aprenderás todo lo necesario para empezar tu carrera en el sector IT, una de las industrias con altos salarios y una estabilidad laboral sin igual.
¡Transforma tu vida y conviértete en un experto en desarrollo web!
