figure e figcaption
Quando uma imagem precisa de uma legenda, existe uma dupla de tags feita sob medida para isso, em vez de improvisar com div e texto solto.
Estudar esta lição interativa →É muito comum uma imagem vir acompanhada de uma legenda, quem tirou a foto, uma explicação, uma fonte. Dá para "resolver" isso com um <p> qualquer logo abaixo da imagem, mas isso não deixa explícito, para o navegador nem para quem lê o código, que aquele parágrafo é a legenda daquela imagem específica. O HTML tem uma dupla de tags feita sob medida para esse relacionamento: <figure> e <figcaption>.
Pense na placa ao lado de uma obra num museu: ela fica fisicamente junto da obra, e ninguém tem dúvida de que aquele texto se refere àquela peça específica, e não à parede ou ao corredor. O <figure> é a moldura que junta imagem e legenda como uma coisa só; o <figcaption> é a própria placa.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. A figcaption fica vinculada à imagem porque as duas moram dentro do mesmo figure.
Você vê esse padrão o tempo todo: a foto de capa de um artigo de blog com o crédito do fotógrafo embaixo, um gráfico num artigo técnico com a fonte dos dados, ou uma imagem de produto com uma nota explicando a cor mostrada. Em todos esses casos, figure + figcaption é a escolha semanticamente correta, mais precisa do que uma div com um p qualquer dentro.
Colocar o <figcaption> fora do <figure> quebra a relação entre os dois: nesse caso, ele vira só um parágrafo qualquer, sem vínculo formal com a imagem. E nem toda imagem precisa de figure: reserve-o para quando existir, de fato, uma legenda ou explicação acompanhando o conteúdo visual.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione figure e figcaption.