<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 (en-US)
Funções ARIA permitidas Com nenhum figcaption descendente: qualquer, caso contrário, não há papéis permitidos
interface DOM HTMLElement (en-US)

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