HTML figure e figcaption: agrupar conteúdo e posicionar legendas

O HTML <figure> agrupa conteúdo autônomo, como ilustrações, gráficos ou código, em uma única unidade, e <figcaption> fornece sua legenda. Coloque um único figcaption como o primeiro ou último filho de figure; omita-o quando não for necessária uma legenda.

figure serve apenas para imagens?

Você pode usar figure para fotografias, ilustrações, gráficos, exemplos de código ou citações a que o texto se refere como um único item. Use div quando você precisar apenas de um contêiner de estilo e evite envolver uma seção inteira relacionada em figure. Usar este elemento não verifica automaticamente os direitos autorais ou a fonte do material.

figcaption descreve o restante do conteúdo de seu elemento pai direto figure. Ele deve ficar dentro de figure, com no máximo um figcaption por figure. Se forem necessárias explicações para a parte superior e a inferior, reúna-as em um único figcaption.

Exemplo completo: coloque a legenda primeiro ou por último

Salve o seguinte código como figures.html e abra-o em um navegador. O exemplo desenha formas simples com SVG (Gráficos Vetoriais Escaláveis) para que ele funcione sem arquivos de imagem separados. O primeiro item tem sua legenda antes do gráfico; o segundo tem a legenda após o gráfico.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar posições de legendas de figure</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Comparação de duas formas</h1>
  <figure>
    <figcaption>Figura A. Círculo azul</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="Círculo azul no centro de um fundo claro">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="Quadrado laranja no centro de um fundo claro">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>Figura B. Quadrado laranja</figcaption>
  </figure>
</body>
</html>

“Figura A. Círculo azul” aparece acima do círculo e “Figura B. Quadrado laranja” abaixo do quadrado. Ao estreitar a janela, o SVG se reduz à largura de figure. Compare as posições movendo figcaption para o início ou o fim de figure, sem colocá-lo fora desse elemento.

Legendas e texto alternativo da imagem têm funções diferentes

Um figcaption pode conter um título, explicação ou fonte visível para todos os leitores. O alt de uma imagem fornece conteúdo substituto para leitores que não podem ver a imagem. Não deixe automaticamente o alt de uma imagem importante vazio apenas porque existe uma legenda, nem duplique cada explicação palavra por palavra em ambos os lugares.

O exemplo usa SVG em vez de img, então fornece descrições das formas com role e aria-label. Para uma fotografia inserida com img, especifique src e alt junto com as dimensões necessárias. Se um gráfico comunica comparações numéricas, considere se uma legenda curta é suficiente e forneça seus dados principais no texto ou em uma tabela também.

O elemento figure não gera automaticamente legendas ou números de figuras, e suas margens padrão dependem do navegador e do CSS. Se a numeração for necessária, mantenha-a consistente com as referências no documento. A referência de figura de figure na MDN e a referência de legenda de figcaption na MDN explicam as regras detalhadas do elemento.