Tag HTML <figcaption>
A tag <figcaption> define um título ou legenda para a tag <figure>. Descrição detalhada, atributos e exemplos de uso.
A tag <figcaption> é um dos elementos HTML5. Ela define uma legenda ou descrição para o conteúdo de um elemento <figure>. Deve ser o primeiro ou o último filho do <figure>. Como primeiro filho, renderiza a legenda acima do conteúdo da figura; como último filho, renderiza abaixo.
Um <figure> pode conter apenas um <figcaption>, mas a própria figura pode envolver muitos tipos de conteúdo independente: um <img>, uma listagem de <code>, uma <table>, um <blockquote>, um gráfico e muito mais.
Por que usar <figcaption> em vez de um <p>?
Você poderia colocar um <p> ao lado de uma imagem e visualmente pareceria igual. A diferença é semântica e importa principalmente para acessibilidade.
Quando uma legenda é marcada como <figcaption> dentro de um <figure>, o navegador associa programaticamente a legenda à figura. Tecnologias assistivas, como leitores de tela, anunciam os dois juntos — o leitor ouve que o conteúdo é uma figura e ouve a legenda como seu rótulo. Um <p> simples é apenas texto não relacionado que por acaso está próximo; nada informa à máquina que ele pertence à imagem.
Portanto, use <figure> + <figcaption> sempre que a legenda fizer parte do conteúdo (e você esperaria que eles se movessem juntos se a página fosse reformatada). Use um <p> comum para texto de parágrafo ordinário.
Sintaxe
A tag <figcaption> vem em pares. O conteúdo é escrito entre as tags de abertura <figcaption> e de fechamento (</figcaption>), e o elemento fica dentro de um <figure>:
<figure>
<!-- figure content, e.g. an image, code block, or table -->
<figcaption>Caption text</figcaption>
</figure>Exemplo da tag HTML <figcaption>:
Tag HTML <figcaption>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Resultado
Legenda antes ou depois
Mova o <figcaption> para controlar onde a legenda aparece. Nada mais muda — apenas sua posição entre os filhos da figura.
Legenda abaixo da imagem (último filho):
<figure>
<img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
<figcaption>Fig.1 – How a request travels through the app.</figcaption>
</figure>Legenda acima da imagem (primeiro filho):
<figure>
<figcaption>Fig.1 – How a request travels through the app.</figcaption>
<img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
</figure>Usando <figcaption> além de imagens
Um <figure> serve para qualquer unidade independente que você possa legendar — não se limita a imagens.
Legendando uma listagem de código
Envolva um bloco <pre> / <code> para que a listagem e seu rótulo fiquem vinculados:
<figure>
<figcaption>Listing 1 – A minimal "Hello, world" in JavaScript.</figcaption>
<pre><code>console.log("Hello, world!");</code></pre>
</figure>Legendando uma tabela
<figure>
<figcaption>Table 1 – HTTP status codes used by the API.</figcaption>
<table>
<tr><th>Code</th><th>Meaning</th></tr>
<tr><td>200</td><td>OK</td></tr>
<tr><td>404</td><td>Not Found</td></tr>
</table>
</figure>Nota: uma <table> possui seu próprio elemento de legenda integrado, <caption>, que é a escolha mais convencional para uma única tabela de dados. Use <figure>/<figcaption> quando a tabela for uma das várias figuras legendadas em um documento, ou quando quiser um rótulo no estilo "Tabela 1" que seja lido como uma figura.
Legendando uma citação
<figure>
<blockquote>
<p>The best way to predict the future is to invent it.</p>
</blockquote>
<figcaption>— Alan Kay</figcaption>
</figure>Veja a tag <blockquote> para mais informações sobre como citar fontes externas.
Acessibilidade: alt não é figcaption
É fácil confundir o atributo alt de uma imagem com um <figcaption>, mas eles têm propósitos diferentes e não devem se duplicar:
alté a alternativa em texto da imagem. Ela substitui a imagem quando não pode ser vista (link quebrado, conexão lenta ou usuário não visual). Descreve o que a imagem mostra. Um leitor de tela a lê no lugar da imagem.<figcaption>é uma legenda — informação complementar sobre a figura que um leitor com visão também vê. Geralmente adiciona contexto que a imagem sozinha não transmite ("Fig.1 – As vendas cresceram 20% ano a ano").
Ambos podem ser aplicados à mesma figura ao mesmo tempo:
<figure>
<img src="chart.png" alt="Bar chart of quarterly sales rising each quarter" />
<figcaption>Fig.2 – Quarterly sales, 2025.</figcaption>
</figure>Aqui o alt descreve o visual ("um gráfico de barras crescendo a cada trimestre") para que usuários não visuais obtenham os dados, enquanto o <figcaption> adiciona o rótulo que todos leem. Mantenha o alt não vazio e descritivo mesmo quando uma legenda estiver presente.
Atributos
A tag <figcaption> suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <figcaption>
Por padrão, os navegadores renderizam o elemento <figcaption> como um elemento de bloco. Você pode personalizar sua aparência usando CSS:
figcaption {
font-style: italic;
color: gray; /* muted text so the caption reads as secondary */
text-align: center;
margin-top: 5px;
}Um exemplo completo e executável, estilizando a legenda e dando à figura uma moldura sutil:
<!DOCTYPE html>
<html>
<head>
<title>Styled figcaption</title>
<style>
figure {
border: 1px solid lightgray;
padding: 10px;
display: inline-block;
text-align: center;
}
figcaption {
font-style: italic;
color: gray;
margin-top: 5px;
}
</style>
</head>
<body>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A cute baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>