Tag HTML <figure>

A tag <figure> marca conteúdo autossuficiente — uma unidade referenciada a partir do fluxo principal do documento, mas completa por si mesma. Ela geralmente contém uma imagem, mas pode igualmente envolver um diagrama, ilustração, listagem de código, citação ou tabela.

A tag <figure> é um dos elementos HTML5.

O que significa "conteúdo autossuficiente"

Um conteúdo é "autossuficiente" quando pode ser movido para outro lugar — uma barra lateral, um apêndice ou a próxima página — sem alterar o significado do texto ao redor. O corpo pode dizer "veja a figura abaixo", mas a figura em si não precisa estar nesse local exato para fazer sentido.

Esse é o principal motivo para escolher <figure> em vez de um simples <img>:

Semântica, não apenas layout. <figure> informa ao navegador e às tecnologias assistivas "este é uma ilustração referenciada e independente", enquanto um <img> simples é apenas uma imagem inline no texto.
Agrupa o conteúdo com sua legenda. Um <figure> vincula uma imagem (ou código, ou citação) à sua descrição para que ambos se movam juntos como um bloco lógico único.
Tratamento por leitores de tela. Muitos leitores de tela anunciam um <figure> como uma região de figura distinta e leem seu <figcaption> como o rótulo da figura, para que os usuários ouçam a explicação diretamente vinculada ao visual.

Se uma imagem é puramente decorativa ou flui inline como parte de uma frase, um <img> simples é suficiente — use <figure> quando o conteúdo for uma unidade referenciada e legendada.

Adicionando uma legenda com `<figcaption>`

Para rotular ou explicar a figura, aninhe um elemento <figcaption> dentro de <figure>. Ele deve ser o primeiro ou último filho do <figure> — primeiro para exibir a legenda acima do conteúdo, último para exibi-la abaixo.

Um <figure> pode conter no máximo um <figcaption>.

Sintaxe

A tag <figure> vem em pares. O conteúdo é escrito entre as tags de abertura (<figure>) e fechamento (</figure>).

Exemplo: `<figure>` com `<figcaption>`

Este é o uso mais comum — uma imagem associada a uma legenda:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The Eiffel Tower at sunset (see Figure 1).</p>

    <figure>
      <img
        src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
        alt="The Eiffel Tower silhouetted against an orange sky"
        width="250"
        height="200"
      />
      <figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
    </figure>
  </body>
</html>

Experimente Você Mesmo »

Result

Exemplo: uma listagem de código

Um <figure> é um envoltório natural para um trecho de código referenciado. A legenda pode nomear a listagem:

<figure>
  <figcaption>Listing 1. A minimal HTML page.</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;Hello, world!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Consulte <pre> e <code> para formatação de código.

Exemplo: uma citação

Uma citação destacada que é referenciada no texto pode ser uma figura, com a fonte na legenda:

<figure>
  <blockquote>
    <p>The only way to do great work is to love what you do.</p>
  </blockquote>
  <figcaption>— Steve Jobs</figcaption>
</figure>

Consulte <blockquote> para marcação de citações.

Exemplo: uma tabela

Dados tabulares referenciados como figura também podem ser envolvidos:

<figure>
  <figcaption>Table 1. Browser market share.</figcaption>
  <table>
    <tr><th>Browser</th><th>Share</th></tr>
    <tr><td>Chrome</td><td>65%</td></tr>
    <tr><td>Safari</td><td>19%</td></tr>
  </table>
</figure>

Consulte <table> para construção de tabelas.

A diferença entre `<figure>` e `<aside>`

Ambos os elementos agrupam conteúdo relacionado, mas respondem a perguntas diferentes.

<figure> contém conteúdo que faz parte do fluxo principal — o documento se refere a ele ("como mostrado na Figura 1"). Removê-lo deixaria uma referência pendente. Use-o para imagens, diagramas, listagens de código e citações que o texto aponta.
<aside> contém conteúdo tangencial — barras laterais, links relacionados, citações destacadas ou unidades de anúncio. O texto principal é lido perfeitamente mesmo se o aside for removido, pois nada no corpo faz referência a ele.

Contraste concreto: um diagrama legendado como "Figura 2: ciclo de vida da requisição" discutido no artigo é um <figure>. Uma lista de "Artigos relacionados" ao lado do mesmo parágrafo é um <aside>.

Acessibilidade

<figure> tem um papel ARIA implícito de figure; não é necessário adicionar role="figure" manualmente.
Quando presente, um <figcaption> visível atua como o nome acessível (rótulo) da figura, para que usuários de leitores de tela obtenham a explicação vinculada ao conteúdo. Prefira um <figcaption> real ao invés de aria-label para que usuários videntes e não videntes vejam o mesmo texto.
Para imagens, o texto alt do <img> e o <figcaption> servem a propósitos diferentes: alt descreve a imagem para usuários que não podem vê-la, enquanto a legenda adiciona contexto para todos. Evite repetir exatamente as mesmas palavras em ambos.

Atributos

A tag <figure> suporta os Atributos Globais e os Atributos de Evento.

Prática

Qual é a função da tag <figure> em HTML?

É usada para inserir uma tabela.É usada para inserir conteúdo embutido.Pode conter apenas uma foto.Marca conteúdo autossuficiente, como fotos, ilustrações, diagramas, listagens de código e citações.É usada para ajustar o layout de uma página web.