Passo 1 de 5
Quando usar figure
Reconheça quando uma imagem forma uma unidade de conteúdo e como representá-la com figure.
Trilha de aprendizado · Nível 4 · Tutorial 2
Marcar uma imagem ou um conjunto de imagens como unidade de conteúdo autocontida e associar uma legenda visível quando ela for necessária.
Quando usar figure
Reconheça quando uma imagem forma uma unidade de conteúdo e como representá-la com figure. 2 min
Associar uma legenda com figcaption
Associe uma legenda visível à figura, respeitando a quantidade e as posições permitidas para figcaption. 2 min
Legenda e alt têm funções diferentes
Combine a legenda visível e o texto alternativo sem repetir informações desnecessárias nem perder o que a imagem comunica. 2 min
Reunir imagens em uma única figura
Agrupe imagens que formam uma unidade com legenda compartilhada e reconheça quando usar figuras separadas. 2 min
Aplicação final: montar e revisar uma figura
Monte uma figura com imagens relacionadas e revise a legenda compartilhada e os textos alternativos. 3 min
Passo 1 de 5
Reconheça quando uma imagem forma uma unidade de conteúdo e como representá-la com figure.
O elemento figure representa uma unidade de conteúdo autocontida: um bloco que faz sentido por si dentro do conteúdo. Uma imagem é uma boa candidata quando pode ser apresentada como essa unidade, sem depender de uma posição visual específica na página.
Exemplo
Uma foto histórica de uma praça, apresentada como registro em uma reportagem, pode formar uma figura. Ela continua sendo esse registro antes ou depois de um parágrafo.
Já um pequeno ícone integrado a um link não precisa de figure só por ser uma imagem.
Em uma reportagem sobre um parque, qual situação justifica melhor o uso de figure?
Para marcar o mapa como uma figura, coloque o img entre <figure> e </figure>. Os atributos que já estavam no img continuam nele, sem alterações.
<figure>
<img
src="imagens/mapa-trilhas.png"
width="640"
height="400"
alt="Trilha circular do parque, com entrada ao sul e lago ao centro."
>
</figure>O img continua inserindo a imagem. O figure acrescenta o significado de unidade de conteúdo; não é uma instrução para centralizar ou posicionar o mapa.
O mapa foi movido do meio para o fim da reportagem, mas continua sendo uma referência para consultar as trilhas. Por causa dessa mudança de posição, é necessário remover o figure.
Passo 2 de 5
Associe uma legenda visível à figura, respeitando a quantidade e as posições permitidas para figcaption.
Quando a figura precisa de uma legenda visível, use <figcaption> dentro de <figure>.
A legenda é opcional: uma figura pode ficar sem ela. Quando houver legenda, use no máximo um <figcaption> por <figure>.
<figure>
<img src="jardim.jpg" width="640" height="480"
alt="Canteiros de ervas ao redor de um caminho de pedras.">
<figcaption>Jardim comunitário no primeiro mês de cultivo.</figcaption>
</figure>Dica
Um <p> perto da imagem pode parecer uma legenda, mas não estabelece a mesma associação semântica que <figcaption> com a figura.
Organize os blocos para que a legenda fique depois de <img>, com ambos dentro de <figure>.
<figcaption> deve ser o primeiro ou o último elemento filho direto de <figure>.
Ser filho direto significa estar dentro de <figure> sem outro elemento, como uma <div>, envolvendo a legenda.
Você montou a versão com a legenda no fim. Veja agora a versão com a legenda no início:
<figure>
<figcaption>Jardim comunitário no primeiro mês de cultivo.</figcaption>
<img src="jardim.jpg" width="640" height="480"
alt="Canteiros de ervas ao redor de um caminho de pedras.">
</figure>Você já decidiu usar <figure>. Qual orientação está correta ao revisar a legenda?
Passo 3 de 5
Combine a legenda visível e o texto alternativo sem repetir informações desnecessárias nem perder o que a imagem comunica.
O figcaption é uma legenda visível que identifica, descreve ou contextualiza a figura. O alt oferece uma alternativa textual à informação da imagem.
Eles se complementam, mas não precisam dizer a mesma coisa. Observe esta foto em um registro sobre o crescimento de uma planta em direção à luz.
Feijão no 7º dia do experimento.
A foto mostra o broto inclinado para a janela, detalhe importante no registro sobre crescimento em direção à luz. A legenda diz “Feijão no 7º dia do experimento”. Qual alt complementa melhor essa legenda?
Neste exemplo, a legenda situa o experimento e o alt comunica a característica observada.
<figure>
<img
src="feijao.jpg"
width="600"
height="400"
alt="Broto de feijão inclinado em direção à luz da janela.">
<figcaption>Feijão no 7º dia do experimento.</figcaption>
</figure>Dica
A presença de figcaption não justifica, por si só, remover alt ou deixá-lo vazio. Evite repetições desnecessárias, mas preserve a informação relevante que a imagem acrescenta ao contexto.
No exemplo do feijão, o alt só estará adequado se repetir a legenda inteira antes de informar a inclinação do broto.
Passo 4 de 5
Agrupe imagens que formam uma unidade com legenda compartilhada e reconheça quando usar figuras separadas.
Uma mesma figure pode conter vários elementos img quando eles formam uma unidade de conteúdo. Nesta comparação de antes e depois, o figcaption se refere às duas imagens — não apenas à imagem mais próxima.
<figure>
<img src="imagens/praca-antes.jpg"
width="640" height="480"
alt="Praça com canteiros de terra exposta.">
<img src="imagens/praca-depois.jpg"
width="640" height="480"
alt="Praça com flores e arbustos nos canteiros.">
<figcaption>Antes e depois da revitalização da Praça do Ipê.</figcaption>
</figure>Dica
A legenda é coletiva, mas cada img mantém seu próprio alt, com a informação relevante daquela imagem.
Organize os trechos em uma única figura: primeiro a muda, depois a planta crescida. Deixe a legenda compartilhada após as duas imagens.
Ter o mesmo tema não basta para reunir imagens em uma figure. Considere a relação entre elas: comunicam uma ideia em conjunto ou são conteúdos independentes que precisam de legendas próprias?
Exemplo
Uma figura conjunta: fotos da frente e do verso de uma moeda, apresentadas como dois aspectos da mesma peça.
Figuras separadas: fotos de duas moedas em fichas independentes, cada uma com sua legenda de identificação.
Uma página apresenta duas esculturas em fichas independentes. Cada foto precisa de uma legenda com o nome da obra e o autor. Qual organização representa melhor esse conteúdo?
Passo 5 de 5
Monte uma figura com imagens relacionadas e revise a legenda compartilhada e os textos alternativos.
Uma matéria apresenta a recuperação da horta da escola em 2025. Estas duas fotos mostram o antes e o depois do mesmo canteiro e devem ser entendidas como uma comparação.
<img src="imagens/horta-antes.jpg"
width="640" height="420"
alt="Canteiro com solo exposto e poucas plantas.">
<img src="imagens/horta-depois.jpg"
width="640" height="420"
alt="Canteiro com fileiras de alface e cobertura de palha.">Reúna os dois img em uma figura e acrescente uma legenda compartilhada que identifique a comparação e o ano. Preserve todos os atributos fornecidos. Após o código, justifique em uma frase por que as fotos devem ficar juntas.
Outra solução preservou os alt, mas organizou os filhos diretos de figure nesta ordem: img → figcaption → img. Qual ajuste torna a posição da legenda adequada?
Resumo
Parabéns! Você concluiu: Associar imagens e legendas com figure e figcaption
Você concluiu “Associar imagens e legendas com figure e figcaption”. Agora pode aplicar esses critérios para montar e revisar as figuras das suas páginas.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
