<figure>: O elemento Figure com Caption opcional

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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	~~unsupported templ: no_tag_omission~~
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>.