<figure>: O elemento Figure com Caption opcional

O elemento <figure> HTML representa conteúdo autocontido, potencialmente com uma legenda opcional, que é especificada usando o <figcaption> elemento. A figura, sua legenda e seu conteúdo são referenciados como uma única unidade.

Experimente

Categorias de conteúdo	Conteudo de fluxo, conteúdo palpável.
Conteúdo permitido	Um elemento `<figcaption>`, seguido por conteúdo de fluxo; ou conteúdo de fluxo seguido por um `<figcaption>` elemento; ou conteúdo de fluxo.
Omissão de tag	None, both the starting and ending tag are mandatory.
Pais permitidos	Qualquer elemento que aceite Contúdo de fluxo.
Função ARIA implícita	figure
Funções ARIA permitidas	Com nenhum figcaption descendente: qualquer, caso contrário, não há papéis permitidos
interface DOM	`HTMLElement`

Atributos

Este elemento inclui apenas os atributos globais.

Notas de uso

Normalmente uma <figure> é uma imagem, ilustração, diagrama, trecho de código, etc., que é referenciado no fluxo principal de um documento, mas que pode ser movido para outra parte do documento ou para um apêndice sem afetar o fluxo principal.
Uma legenda pode ser associada ao elemento <figure> inserindo um <figcaption> dentro dele (como o primeiro ou o último filho). O primeiro elemento <figcaption> encontrado na figura é apresentado como legenda da figura.

Exemplos

Imagens

html

<!-- Apenas uma imagem -->
<figure>
  <img src="favicon-192x192.png" alt="O lindo logotipo do MDN." />
</figure>

<!-- Imagem com legenda -->
<figure>
  <img src="favicon-192x192.png" alt="O lindo logotipo do MDN." />
  <figcaption>Logotipo MDN</figcaption>
</figure>

Trechos de codigo

html

<figure>
  <figcaption>
    Obtenha detalhes do navegador usando o <code>navigator</code>.
  </figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Nome do código do navegador: " + navigator.appCodeName + "; ";
  txt+= "Nome do navegador: " + navigator.appName + "; ";
  txt+= "Versão do navegador: " + navigator.appVersion + "; ";
  txt+= "Cookies habilitados: " + navigator.cookieEnabled + "; ";
  txt+= "Plataforma: " + navigator.platform + "; ";
  txt+= "Cabeçalho do agente do usuário: " + navigator.userAgent + "; ";
  console.log("Exemplo de Navegador", txt);
}
  </pre>
</figure>

Citações

html

<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    Se a depuração é o processo de remoção de bugs de software, então a
    programação deve ser o processo de colocá-los.
  </blockquote>
</figure>

Poemas

html

<figure>
  <p style="white-space:pre">
    Ofereça-me um discurso, encantarei seu ouvido, Ou como uma viagem de fadas
    sobre o verde, Ou, como uma ninfa, com longos cabelos desgrenhados, Dança na
    areia, e mas nenhum fundamento visto: O amor é um espírito todo compacto de
    fogo, Não grosseiro para afundar, mas leve, e vai aspirar.
  </p>
  <figcaption><cite>Vênus e Adônis</cite>, de William Shakespeare</figcaption>
</figure>

Especificações

Specification
HTML Standard # the-figure-element

Compatibilidade do navegador

BCD tables only load in the browser

Veja também

O elemento <figcaption>.