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