Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

<figure>

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
WHATWG HTML Living Standard
The definition of '<figure>' in that specification.
Living Standard  
HTML5
The definition of '<figure>' in that specification.
Recommendation  

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,