Uso de <figure> y <figcaption>

7.1 Elemento <figure>

El uso de las etiquetas <figure> y <figcaption> en HTML proporciona una manera semántica de añadir imágenes y otros elementos multimedia con sus respectivas leyendas. Estas etiquetas ayudan a mejorar la estructura del contenido, haciéndolo más accesible y comprensible tanto para los usuarios como para los motores de búsqueda. Vamos a ver estos elementos con más detalle.

El elemento <figure> se utiliza para indicar contenido independiente que ilustra o explica el resto del documento. Puede contener una imagen, un diagrama, un video, un audio, una tabla o incluso un bloque de código. Normalmente, el elemento <figure> se utiliza junto con el elemento <figcaption>, el cual agrega una leyenda al contenido de <figure>.

Sintaxis

    
      <figure>
        <!-- Aquí puede haber cualquier elemento multimedia, por ejemplo, una imagen -->
      </figure>
    
  

Ejemplos de uso:

Ejemplo 1: Imagen con leyenda

    
      <figure>
        <img src="example.jpg" alt="Ejemplo de imagen">
        <figcaption>Leyenda de la imagen que explica su contenido</figcaption>
      </figure>
    
  

Ejemplo 2: Tabla con leyenda

    
      <figure>
        <table>
          <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
          </tr>
          <tr>
            <td>Datos 1</td>
            <td>Datos 2</td>
          </tr>
        </table>
        <figcaption>Leyenda de la tabla</figcaption>
      </figure>
    
  

7.2 Elemento <figcaption>

El elemento <figcaption> se utiliza para agregar una leyenda al contenido del elemento <figure>. Puede ser ubicado tanto antes como después del contenido de <figure>, dependiendo de las preferencias del desarrollador o los requisitos de diseño.

Sintaxis

    
      <figure>
        <!-- Contenido del elemento figure -->
        <figcaption>Leyenda del contenido</figcaption>
      </figure>
    
  

Ejemplos de uso:

Ejemplo 1: Leyenda después de la imagen

    
      <figure>
        <img src="landscape.jpg" alt="Paisaje">
        <figcaption>Hermoso paisaje con montañas y lago</figcaption>
      </figure>
    
  

Ejemplo 2: Leyenda antes de la imagen

    
      <figure>
        <figcaption>Hermoso paisaje con montañas y lago</figcaption>
        <img src="landscape.jpg" alt="Paisaje">
      </figure>
    
  

7.3 Accesibilidad y SEO

El uso de los elementos <figure> y <figcaption> mejora la accesibilidad y el SEO de tu sitio web. Los programas de lectura de pantalla utilizados por personas con discapacidades entienden mejor el contexto de la imagen gracias a la etiqueta semántica <figcaption>. Los motores de búsqueda también consideran la estructura del documento HTML, lo que ayuda a mejorar el indexado y el ranking de la página.

Ejemplos de uso en diversos contextos:

Ejemplo 1: Incorpora un diagrama

    
      <figure>
        <img src="chart.png" alt="Diagrama mostrando el crecimiento de ventas">
        <figcaption>Diagrama mostrando el crecimiento de ventas del último trimestre</figcaption>
      </figure>
    
  

Ejemplo 2: Contenido de video con leyenda

    
      <figure>
        <video controls>
          <source src="example.mp4" type="video/mp4">
          Tu navegador no soporta video.
        </video>
        <figcaption>Ejemplo de video que demuestra el funcionamiento del producto</figcaption>
      </figure>
    
  

Ejemplo 3: Código con explicación

    
      <figure>
        <pre>
          <code>
            function helloWorld() {
              console.log('Hello, world!');
            }
          </code>
        </pre>
        <figcaption>Ejemplo de función en JavaScript que imprime "Hello, world!" en la consola</figcaption>
      </figure>
    
  

7.4 Estilo y diseño con CSS

La estilización de los elementos <figure> y <figcaption> mediante CSS permite crear un diseño visual atractivo y mejorar la percepción del contenido.

Ejemplo con aplicación de estilos:

    
      figure {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 20px;
        text-align: center;
      }

      figcaption {
        font-style: italic;
        color: #555;
        margin-top: 10px;
      }
    
  

    
      <figure>
        <img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
        <figcaption>Hermosa vista de la naturaleza</figcaption>
      </figure>
    
  

    
      <figure>
        <img src="nature.jpg" alt="Naturaleza">
        <figcaption>Hermosa vista de la naturaleza</figcaption>
      </figure>
    
  

El uso de los elementos <figure> y <figcaption> proporciona una manera semántica y estructurada de añadir contenido multimedia con leyendas a las páginas web. Estos elementos no solo mejoran la accesibilidad y el SEO, sino que también hacen que el contenido sea más comprensible y estructurado para los usuarios.