En el diseño web moderno, ofrecer una experiencia de usuario óptima es clave. Parte de esa experiencia incluye la habilidad de presentar información de manera clara y ordenada, sin abrumar al usuario con texto o elementos visuales. Aquí es donde entra en juego la etiqueta <details> de HTML, una herramienta maravillosa para mostrar contenido ocultable. En este artículo desglosaremos cómo y cuándo implementar esta etiqueta para mejorar la usabilidad y estética de tus páginas web.
¿Qué es la etiqueta <details> en HTML?
La etiqueta <details> es un componente de HTML5 diseñado para facilitar la creación de contenido que el usuario puede mostrar u ocultar a voluntad. Fundamentalmente, esta etiqueta es utilizada para crear un control de plegado (también conocido como "acordeón") sin la necesidad de JavaScript.
Al ser un elemento nativo, es soportada por la mayoría de navegadores modernos y puede mejorar la performance de la página al no depender de librerías externas. La etiqueta <details> se combina habitualmente con la etiqueta <summary>, que define el título o el encabezado que es visible antes de expandir el contenido oculto.
¿Cómo se utiliza la etiqueta <details>?
Para implementar un contenido desplegable con <details>, comienza con la etiqueta de apertura y cierre que envuelve el contenido a ocultar. Dentro de ella, se añade <summary> para determinar qué se va a mostrar como lead-in o introducción al contenido que está por detrás.
<details>
<summary>Título del contenido desplegable</summary>
Aquí va todo el contenido que deseas que sea ocultado y mostrado solo cuando el usuario lo solicite.
</details>Al clickear sobre el texto de <summary>, el resto del contenido se despliega, brindando al usuario acceso a los datos adicionales.
Cuando emplear la etiqueta <details>
La etiqueta <details> resulta ideal en una multitud de escenarios, tales como:
- Preguntas frecuentes (FAQs): Presentar las preguntas de manera compacta hasta que el usuario desee expandir la respuesta.
- Artículos o posteos extensos: Para dividir secciones de contenido voluminoso, facilitando la lectura.
- Formularios o configuraciones avanzadas: Ocultar opciones adicionales que no son usadas por todos los usuarios.
- Comentarios o foros: Esconder respuestas o comentarios secundarios para mejorar la navegabilidad del hilo principal.
Buenas prácticas al usar <details>
- Claridad en
<summary>: El texto del resumen debería ser claro e indicativo del contenido que se está ocultando. - No sobrecargar: Usar
<details>para contenidos realmente beneficiosos de ser ocultados. Demasiados elementos plegables pueden llevar a una experiencia de usuario confusa. - Accesibilidad: Asegurarse de que los usuarios de tecnologías asistivas puedan navegar e interactuar con los controles desplegables.
- Estilo y diseño: Aunque los estilos predeterminados de
<details>son funcionales, personalizarlos con CSS es recomendable para que se integren con el diseño de tu sitio.
Personalización y estilos
Con CSS, se puede personalizar la apariencia de la etiqueta <details> y <summary>. Aunque el icono predeterminado que muestra la expansión del contenido no puede ser modificado directamente, con algunos trucos de CSS puedes crear tus propios estilos para los indicadores de expansión y colapso.
details > summary {
cursor: pointer;
color: #333;
font-weight: bold;
}
details > summary::-webkit-details-marker {
display: none;
}
details[open] > summary:after {
content: '▼';
}
details > summary:after {
content: '►';
float: right;
}Con ese CSS, el icono predeterminado es eliminado y añadimos nuestros propios indicadores personalizados.
La semántica importa
El uso de <details> debe ser justificado semánticamente. Si se trata de ocultar contenido que no es relevante o es puramente decorativo, considera otras técnicas. No obstante, si el contenido que quieres ocultar amplía o complementa la información presentada de forma relevante, <details> es una solución perfecta.
Conclusión
La etiqueta <details> es una gran adición a la caja de herramientas de cualquier desarrollador web. Su facilidad de uso, combinada con el control que ofrece al usuario final sobre su experiencia de navegación, la convierte en un componente valioso en la creación de interfaces ricas y accesibles. Si te has encontrado en la situación de necesitar un contenido desplegable en tu sitio web, no dudes en implementarla.
Recuerda que menos es más. Implementa <details> sabiamente y verás cómo el contenido de tu página web NelkoDev ganará en claridad y eficiencia. Si deseas conversar sobre este u otros temas relacionados con el desarrollo web, contactame. Juntos podemos trabajar para hacer de la web un lugar más funcional y elegante.
Spanish 
English