<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 with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O elemento `<figcaption>`.