<figure>

Resumo

O **Elemento HTML <figure> **representa o conteúdo independente, frequentemente com uma legenda (<figcaption>), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

Note: Notas de uso:

Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.

Uma legenda pode ser associada com o elemento <figure> inserindo o elemento <figcaption> dentro dele (no inicio ou no fim).

Content categories (en-US) Flow content (en-US), sectioning root, palpable content.
Permite conteúdo A <figcaption> element, followed by flow content (en-US); or flow content followed by a <figcaption> element; or flow content.
Omissão de TAGs None, both the starting and ending tag are mandatory.
Permitted parent elements Any element that accepts Flow content (en-US).
DOM interface HTMLElement

<!-- Apenas uma imagem-->
<figure>
  <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="Uma imagem impressionante">
</figure>
<p></p>
<!-- Imagem com legenda -->
<figure>
  <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="Uma imagem impressionante">
  <figcaption>Legenda para a imagem impressionante</figcaption>
</figure>
<p></p>

Example 2

    <figure>
      <figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
        <pre>
          function NavigatorExample(){
          var txt;
          txt = "Browser CodeName: " + navigator.appCodeName;
          txt+= "Browser Name: " + navigator.appName;
          txt+= "Browser Version: " + navigator.appVersion ;
          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
          txt+= "Platform: " + navigator.platform;
          txt+= "User-agent header: " + navigator.userAgent;
          }
        </pre>

Exemplo 3

<figure>
      <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
      <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
    </figure>

Especificações

Especificação	Status	Comentário
HTML Living Standard The definition of '<figure>' in that specification.	Padrão em tempo real
HTML5 The definition of '<figure>' in that specification.	Recomendação

Navegadores compatíveis

BCD tables only load in the browser

Veja Também

O <figcaption> elemento.