¿Para qué sirven las etiquetas «figure» y «figcaption»?

Las etiquetas <figure> y <figcaption> en HTML5 trabajan juntas para marcar semánticamente contenido auto-contenido, como ilustraciones, diagramas, fotografías, fragmentos de código, citas extensas, etc., junto con su correspondiente leyenda o título.

<figure>

• Propósito: El elemento <figure> se utiliza para encapsular cualquier contenido que se considera una unidad independiente y que se referencia desde el flujo principal del documento, pero cuya posición exacta no es crítica para la comprensión de dicho flujo.
  Es decir, si movieras el contenido del <figure> a otra parte de la página (como un apéndice) o incluso lo eliminaras, el flujo principal del texto debería seguir teniendo sentido.
• Tipo de contenido: Puede albergar una amplia variedad de elementos, como una o más imágenes (<img>), gráficos (SVG, <canvas>), bloques de código (<pre><code>), diagramas, audio (<audio>), vídeo (<video>), o incluso texto como poemas o citas.
  Un <figure> puede contener varios elementos si todos forman parte de la misma unidad lógica descrita por la leyenda.

<figcaption>

• Propósito: El elemento <figcaption> proporciona un título, leyenda o descripción para el contenido de su elemento <figure> padre. Es el texto que explica o da contexto a la figura.
• Ubicación y uso:
  • Debe ser el primer o el último hijo directo de la etiqueta <figure> que la contiene.
  • Un <figure> puede tener como máximo una etiqueta <figcaption>.
  • Aunque es opcional (un <figure> puede existir sin <figcaption>), su uso es altamente recomendado porque mejora significativamente la accesibilidad (las tecnologías de asistencia pueden asociar la descripción con la figura) y la comprensión del contenido.

¿Cómo y cuándo usarlas juntas?

Se utilizan cuando tienes un bloque de contenido (como una imagen, un diagrama, un ejemplo de código) que quieres acompañar de una descripción o título que esté semánticamente ligado a él.

Beneficios:

• Semántica clara: Establece una relación explícita entre el contenido visual o textual y su descripción.
• Accesibilidad: Permite a los lectores de pantalla y otras tecnologías de asistencia entender que la leyenda pertenece a la figura, proporcionando contexto vital.
• Estilización: Facilita la aplicación de estilos CSS al conjunto de la figura y su leyenda como una unidad.
• Portabilidad: El contenido de <figure> está pensado para ser auto-contenido, lo que teóricamente facilita su redistribución (por ejemplo, en un feed).

Ejemplo:

<article>
  <h2>Los Planetas del Sistema Solar Interior</h2>
  <p>Los planetas interiores son Mercurio, Venus, Tierra y Marte. Son los más cercanos al Sol y son principalmente rocosos.</p>
  
  <figure>
    <img src="planetas_rocosos.jpg" alt="Comparación de tamaño de Mercurio, Venus, Tierra y Marte.">
    <img src="orbita_tierra.jpg" alt="Órbita de la Tierra alrededor del Sol.">
    <figcaption>
      Figura 1: Representación de los planetas rocosos del Sistema Solar y la órbita terrestre. (Nótese que un figure puede contener múltiples imágenes bajo una sola leyenda).
    </figcaption>
  </figure>
  
  <p>La Tierra es el único planeta conocido con vida...</p>

  <h3>Ejemplo de Código para Calcular Distancia</h3>
  <figure>
    <pre><code>// Pseudocódigo para distancia orbital
function calcularDistancia(planetaA, planetaB) {
  let dA = planetaA.distanciaSol;
  let dB = planetaB.distanciaSol;
  return Math.abs(dA - dB);
}</code></pre>
    <figcaption>
      Listado 1: Ejemplo de pseudocódigo para una función simple.
    </figcaption>
  </figure>
</article>
Lenguaje del código: PHP (php)

En estos ejemplos, tanto las imágenes como el bloque de código se presentan como figuras con sus respectivas leyendas, clarificando su papel dentro del contenido.