¿Como funciona el comando en HTML5: 'Details'?

La etiqueta <details> de HTML5 es una de las etiquetas interactivas que facilita la creación de secciones de contenido que el usuario puede expandir o contraer. Es particularmente útil para mostrar información adicional que puede no ser siempre relevante, y que el usuario puede optar por ver.

Atributos de <details>

1. open:
   • Este es el único atributo global específico de <details>.
   • Indica que la sección de detalles debe mostrarse abierta (visible) cuando carga la página.
   • Es un atributo booleano, lo que significa que su mera presencia establece su valor a true; si está ausente, el valor es false.

<details open>
  <!-- Los detalles estarán visibles al cargar la página -->
</details>

Uso de <details> en HTML5

El uso básico de la etiqueta <details> incluye la creación de un contenedor plegable que puede consistir en texto, imágenes, o cualquier otro elemento HTML. Normalmente, la etiqueta <summary> se utiliza dentro de <details> para definir un encabezado que será siempre visible y que el usuario puede hacer clic para mostrar u ocultar el contenido adicional.

Ejemplo 1: Uso básico de <details>

Este ejemplo muestra una sección de preguntas frecuentes (FAQs) donde el usuario puede expandir o contraer las respuestas.

<details>
  <summary>¿Qué es HTML5?</summary>
  <p>HTML5 es la última versión del lenguaje de marcado HTML, usado para estructurar y presentar contenido en la web.</p>
</details>

<details>
  <summary>¿Qué es la etiqueta <details> en HTML5?</summary>
  <p>La etiqueta <details> permite mostrar información adicional que se puede ocultar o mostrar cuando el usuario lo desee.</p>
</details>

Ejemplo 2: Uso con imágenes y más contenido

En este ejemplo, se incluye más que solo texto dentro de las etiquetas <details>, demostrando su flexibilidad.

<details>
  <summary>Ver imagen</summary>
  <img src="imagen-ejemplo.jpg" alt="Descripción de la imagen">
</details>

<details>
  <summary>Más información sobre HTML5</summary>
  <p>HTML5 agrega nuevas funcionalidades como semántica mejorada, gráficos y multimedia integrados, y mejoras en el manejo de formularios.</p>
  <ul>
    <li>Sintaxis más limpia</li>
    <li>Soporte multimedia integral</li>
    <li>Mejora en la interacción a través de APIs</li>
  </ul>
</details>

Propiedades y comportamiento

• Interactividad: La capacidad de expandir y contraer contenido permite a los usuarios tener una experiencia más interactiva y controlada.

• Accesibilidad: Utilizar <details> puede mejorar la accesibilidad de una página web. Los lectores de pantalla y otras tecnologías asistivas pueden reconocer esta estructura y permitir al usuario interactuar con ella de manera más efectiva.

• Estilos: La apariencia de la etiqueta <details> y su contenido puede ser estilizada usando CSS para ajustarse a la estética de la página web.

details {
  margin-bottom: 1em;
}

summary {
  font-weight: bold;
  cursor: pointer;
}

details[open] summary {
  color: blue;
}

En resumen, la etiqueta <details> en HTML5 es una herramienta poderosa y accesible para manejar contenido plegable en una página web, ofreciendo una forma sencilla e interactiva de presentar información adicional sin sobrecargar la interfaz de usuario.