<figure>: Elemento FIGURE
Última atualização: 2026-10-13
<figure>Elemento FIGURE
Representa conteúdo de fluxo autônomo, frequentemente com figcaption, usado para imagens, diagramas, código ou exemplos.
| Categoria | Semântico |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </figure> tag |
| Status | Padrão |
📝 Sintaxe
<figure>conteúdo da figura</figure>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <figure> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： O conteúdo dentro de figure permanece significativo ao ser movido; a legenda deve ser figcaption, não um p comum.
❓ Perguntas Frequentes
Qfigure serve apenas para imagens?
ANão.
<figure> é uma unidade de conteúdo «autocontida, cuja remoção do corpo do documento não afeta a ideia principal»: imagens, blocos de código, tabelas, vídeos, gráficos e poemas servem. Costuma vir com <figcaption> de legenda — um cartão de conteúdo semântico.QQual é a diferença entre figure e colocar img diretamente?
AUm
<img> direto é apenas uma ilustração; dentro de <figure>, declara-se «esta é uma unidade de conteúdo referenciável por si só». O leitor de tela a lê como um todo com legenda, e com <figcaption> cria-se a relação imagem-texto. Quando houver legenda ou conteúdo agrupado, use figure.Qfigure pode conter várias imagens?
ASim.
<figure> permite que várias imagens compartilhem um único <figcaption> (como «Figura 1a e Figura 1b») — uma das vantagens sobre o <img> solto; cada imagem ainda precisa do seu próprio atributo alt.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
