La etiqueta <summary> en HTML5 se usa para definir un encabezado visible para el elemento <details>. Por defecto, el contenido de la etiqueta <summary> es visible y puede ser clickeado para alternar la visualización del contenido de <details>. Este mecanismo es especialmente útil para presentar información adicional que el usuario puede expandir y colapsar, mejorando la experiencia de usuario y la organización del contenido en la página.
<summary>La etiqueta <summary> no tiene atributos específicos. Sin embargo, dado que es un elemento HTML estándar, hereda los atributos globales. Estos atributos pueden ser usados para aplicar accesibilidad o manipulación mediante CSS y JavaScript. Aquí se describen algunos de los atributos globales más comunes que podrías utilizar con <summary>:
aria-expanded puede ser utilizado para indicar si el contenido mostrado está expandido o colapsado.<summary> en HTML5La etiqueta <summary> se utiliza como parte del elemento <details>. Aquí tienes ejemplos sencillos de uso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Details y Summary</title>
</head>
<body>
<details>
<summary>Más información</summary>
<p>Este es el contenido extra que se muestra al hacer clic en "Más información".</p>
</details>
</body>
</html>En este ejemplo básico, el elemento <summary> contiene el texto "Más información". Al hacer clic en este encabezado, se despliega un párrafo con información adicional.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secciones Collapsibles</title>
</head>
<body>
<details>
<summary class="encabezado">Sección 1</summary>
<p>Detalles de la sección 1.</p>
</details>
<details>
<summary class="encabezado">Sección 2</summary>
<p>Detalles de la sección 2.</p>
</details>
<details>
<summary class="encabezado">Sección 3</summary>
<p>Detalles de la sección 3.</p>
</details>
</body>
</html>En este ejemplo, hemos utilizado múltiples para crear varias secciones collapsibles. Cada sección tiene su propio que contiene un título, y los detalles específicos de cada sección se muestran al hacer clic en esos títulos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso de Atributos Globales</title>
<style>
.encabezado {
font-weight: bold;
color: blue;
}
#detalle1 {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<details id="detalle1">
<summary class="encabezado" title="Haga clic para expandir">Más información</summary>
<p>Este es el contenido adicional que se muestra al hacer clic en "Más información".</p>
</details>
</body>
</html>En este último ejemplo, hemos añadido atributos globales como class, id y title a la etiqueta <summary> y al conjunto <details>. También hemos estilizado el texto del encabezado y el contenido colapsable usando CSS.
En resumen, la etiqueta <summary> es una herramienta útil para crear contenido interactivo y organizado en páginas web, permitiendo a los usuarios expandir y colapsar secciones de información de manera intuitiva y accesible.