Curso de HTML / Agrupar uma imagem e a sua legenda com figure e figcaption

figure agrupa conteúdo autônomo como uma imagem, um gráfico ou um exemplo de código, e figcaption dá a esta figura uma legenda visível. Nem todas as imagens precisam desses elementos. Use-os quando o conteúdo e sua explicação pertencerem juntos como uma unidade.

Mantenha uma imagem e sua legenda juntas

Uma foto de viagem e seu local ou contexto podem formar uma figura. Coloque figcaption como o primeiro ou último filho de figure. Use a imagem de exemplo e as instruções de caminho apresentadas em Imagens: img, texto alternativo e dimensões.

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Uma árvore em um ilhote no meio de um lago, com montanhas ao fundo"
       width="960" height="540">
  <figcaption>Figura: o lago e a árvore usados nesta lição</figcaption>
</figure>

Se a imagem ultrapassar a largura do conteúdo, coloque este CSS no elemento style do head. Alterar a legenda não muda automaticamente o texto alternativo, então verifique cada um independentemente.

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

Baixe a imagem de exemplo com 960 pixels de largura e coloque-a ao lado do arquivo HTML, e então coloque este código dentro do body. O nome do arquivo é html-image-sample-lake-tree-960-v1.webp e seu tamanho real é 960×540 pixels. A legenda aparece embaixo; mova figcaption para a posição do primeiro filho para colocá-la acima.

O texto alternativo e as legendas têm funções diferentes

O texto alt transmite as informações ou a função da imagem quando ela não pode ser percebida. O figcaption visível fornece um título, uma fonte ou um contexto para todos. Repetir exatamente a mesma frase em ambos pode criar uma leitura redundante. Neste exemplo, o atributo alt descreve a informação visível e a legenda identifica seu papel como exemplo de lição. Examine a função da imagem ao mesmo tempo que o uso do teclado em Princípios básicos de acessibilidade: Títulos, Links, Imagens e Teclado.

Para uma imagem puramente decorativa, considere alt="", mas verifique primeiro se as informações importantes estão disponíveis em outro lugar. Um gráfico deve transmitir sua tendência principal ou seu resultado, e não apenas a expressão "gráfico de barras". Se seus dados exigirem uma explicação mais longa, forneça-a em um texto ou tabela próxima e deixe o texto alternativo guiar os leitores até ele. A árvore de decisão W3C WAI para o texto alternativo ajuda nessa escolha.

Quando é possível omitir a figura?

Uma imagem comum no fluxo de um parágrafo não precisa de figure se não tiver uma legenda ou referência separada. Um diagrama discutido como «a figura seguinte», ou um exemplo de código com legenda, é um candidato mais apropriado. Um figure pode conter mais do que uma imagem. Veja a referência de figura em MDN para seu modelo de conteúdo.

Para vincular uma fonte na legenda, substitua o figcaption anterior da seguinte forma. Este link leva à lição que fornece o arquivo de exemplo real. Para uma imagem diferente, identifique seu verdadeiro criador/fonte e verifique suas condições de uso; a simples atribuição não concede permissão.

<figcaption>Fonte da imagem de exemplo: <a href="https://www.codingfactory.net/pt/18044">o arquivo fornecido na lição sobre imagens</a>.</figcaption>

O texto-fonte e o link aparecem abaixo da imagem, enquanto o atributo alt continua descrevendo a árvore, o lago e as montanhas. Não repita todos os detalhes da atribuição no alt.

Se o resultado parecer incorreto

Os navegadores podem adicionar margens padrão ao redor de figure. Verifique seu CSS margin antes de modificar a estrutura HTML. Se a imagem estiver ausente, verifique o nome do arquivo e o caminho relativo. Se a legenda estiver ausente, certifique-se de que figcaption está dentro de figure e que as tags de fechamento estão presentes. Uma legenda não fornece automaticamente um texto alternativo apropriado; verifique ambos separadamente.