<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.

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 Flow content, sectioning root, palpable content.
Permite conteúdoA <figcaption> element, followed by flow content; 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.
DOM interface HTMLElement

Atributos

Este elemento só inclui os atributos globais.

Exemplos

Exemplo 1

<!-- 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>

Imagem1. MDN Logo

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>

Obtenha os detalhes do browser usando navigator

          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;
          }

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>

Edsger Dijkstra :-

"Se o debugging é o processo de remoção de bugs de software,
então programação deve ser o processo de colocá-los"

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

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Desktop
Dispositivo móvel

Recurso	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Suporte Básico	8	4.0 (2.0)	9.0	11.10	5.1

Recurso	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Suporte Básico	3.0	4.0 (2.0)	9.0	11.0	5.1 (iOS 5.0)

Veja Também

O <figcaption> elemento.