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

Descripción Detallada del Elemento <figcaption> en HTML5

Definición

El elemento <figcaption> de HTML5 se utiliza para proporcionar una leyenda o descripción a un elemento <figure>. Normalmente, se usa para explicar, clarificar o proporcionar contexto adicional a una imagen, ilustración, diagrama, fragmento de código, u otro contenido representado dentro del elemento <figure>.

Atributos

El elemento <figcaption> puede llevar los atributos globales permitidos para cualquier elemento HTML, pero no dispone de atributos específicos propios. A continuación se enumeran y describen los atributos globales que puede contener:

1. Atributos Globales:
   • accesskey: Especifica un atajo de teclado para enfocar el <figcaption>.
   • class: Permite definir una o varias clases CSS para este elemento.
   • contenteditable: Indica si el contenido del <figcaption> es editable o no.
   • contextmenu: Asocia un menú contextual personalizado con el <figcaption>.
   • dir: Define la dirección del texto, puede ser 'ltr' (left-to-right) o 'rtl' (right-to-left).
   • draggable: Indica si el <figcaption> es arrastrable.
   • dropzone: Especifica qué tipo de contenido es aceptable cuando se arrastra y suelta.
   • hidden: Indica que el <figcaption> no debería ser mostrado.
   • id: Define un identificador único para el <figcaption>.
   • lang: Indica el lenguaje del contenido dentro del <figcaption>.
   • spellcheck: Indica si el contenido del <figcaption> debe ser revisado ortográficamente.
   • style: Permite añadir estilos CSS individuales al <figcaption>.
   • tabindex: Especifica el orden de tabulación del elemento.
   • title: Proporciona información adicional sobre el <figcaption> que generalmente se muestra como un tooltip.
   • translate: Indica si el contenido del elemento debe ser traducido o no.

Uso del <figcaption> en HTML5

Ejemplos Sencillos

1. Imagen con Leyenda:

   <figure>
       <img src="paisaje.jpg" alt="Un hermoso paisaje montañoso.">
       <figcaption>Un hermoso paisaje montañoso al amanecer.</figcaption>
   </figure>

   En este ejemplo, la imagen "paisaje.jpg" tiene una leyenda que proporciona más contexto visual: "Un hermoso paisaje montañoso al amanecer."

2. Tabla con Descripción:

   <figure>
       <table>
           <tr>
               <th>Nombre</th>
               <th>Edad</th>
           </tr>
           <tr>
               <td>Alice</td>
               <td>30</td>
           </tr>
       </table>
       <figcaption>Tabla 1: Información de edad de las personas.</figcaption>
   </figure>

   En este caso, la tabla está acompañada de una leyenda descriptiva: "Tabla 1: Información de edad de las personas."

3. Diagrama con Explicación:

   <figure>
       <img src="diagrama.png" alt="Diagrama de flujo del proceso de validación.">
       <figcaption>Diagrama de flujo que describe el proceso de validación de datos.</figcaption>
   </figure>

   Aquí, la leyenda ayuda a entender de qué trata el diagrama: "Diagrama de flujo que describe el proceso de validación de datos."

4. Uso dentro de un artículo:

   <article>
       <h1>Historia de la Computación</h1>
       <figure>
           <img src="computadora_antigua.jpg" alt="Computadora antigua.">
           <figcaption>Una de las primeras computadoras de la historia.</figcaption>
       </figure>
       <p>La computación ha evolucionado significativamente desde sus inicios...</p>
   </article>

   En este ejemplo, al describir sobre la historia de la computación, se incluye una imagen con una leyenda para ayudar al lector a contextualizar una "Computadora antigua."

Conclusión

El elemento <figcaption> en HTML5 es una herramienta valiosa para proporcionar contexto y descripciones ricas que mejoran la accesibilidad y la comprensión del contenido multimedia en las páginas web. Las leyendas hacen que el contenido sea más útil no solo para los usuarios, sino también para los motores de búsqueda y los sistemas de accesibilidad.