Introduced in HTML5

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

Atributos

Este elemento só inclui os atributos globais.

Exemplos

Exemplo 1

<!-- Apenas uma imagem-->
<figure>
	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
</figure>
<p></p>
<!-- Imagem com legenda -->
<figure>
	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">	
	<figcaption>Legenda para a imagem impressionante</figcaption>
</figure>
<p></p>
MDN Logo

 

MDN Logo

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  

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

Etiquetas do documento e colaboradores

Colaboradores desta página: jorgeclesio, teoli, Graffitti
Última atualização por: jorgeclesio,