La etiqueta <detalles> se usa para el contenido/información que inicialmente está oculta pero que podría mostrarse si el usuario desea verla. Esta etiqueta se utiliza para crear un widget interactivo que el usuario puede abrir o cerrar. El contenido de la etiqueta de detalles es visible cuando se abren los atributos establecidos. La etiqueta de resumen se usa con la etiqueta de detalles para especificar un encabezado visible.
Esta etiqueta es nueva en HTML5.
Sintaxis:
<details>
<summary> Text content </summary>
<div> Content . . . >
</details>
Atributos:
detalles abiertos : la etiqueta de detalle tiene un atributo llamado abierto que se utiliza para mostrar la información oculta de forma predeterminada.
Ejemplo: El siguiente código explica la etiqueta de detalles.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <!-- details tag starts here --> <details> <summary>GeeksforGeeks</summary> <p>A computer science portal for geeks</p> <div>It is a computer science portal where you can learn programming.</div> <!-- details tag ends here --> </details> </body> </html>
Producción:
Sintaxis:
<details open>
<summary> Text content </summary>
<div> Content . . . >
</details>
Ejemplo: El siguiente código explica la etiqueta abierta de detalles en la etiqueta de detalles.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <!-- details open tag starts here --> <details open> <summary>GeeksforGeeks</summary> <p>A computer science portal for geeks</p> <div>It is a computer science portal where you can learn programming.</div> <!-- details open tag ends here --> </details> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome 12.0 y superior
- Edge 79.0 y superior
- Firefox 49.0 y superior
- Ópera 15.0 y superior
- Safari 6.0 y superior
Publicación traducida automáticamente
Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA