<figure>: O elemento Figure com Caption opcional
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
O elemento <figure>
HTML representa conteúdo autocontido, potencialmente com uma legenda opcional, que é especificada usando o <figcaption>
elemento. A figura, sua legenda e seu conteúdo são referenciados como uma única unidade.
Experimente
Categorias de conteúdo | Conteudo de fluxo, conteúdo palpável. |
---|---|
Conteúdo permitido |
Um elemento <figcaption> , seguido por
conteúdo de fluxo; ou conteúdo de fluxo seguido por um
<figcaption> elemento; ou conteúdo de fluxo.
|
Omissão de tag | None, both the starting and ending tag are mandatory. |
Pais permitidos | Qualquer elemento que aceite Contúdo de fluxo. |
Função ARIA implícita | figure |
Funções ARIA permitidas | Com nenhum figcaption descendente: qualquer, caso contrário, não há papéis permitidos |
interface DOM | HTMLElement |
Atributos
Este elemento inclui apenas os atributos globais.
Notas de uso
- Normalmente uma
<figure>
é uma imagem, ilustração, diagrama, trecho de código, etc., que é referenciado no fluxo principal de um documento, mas que pode ser movido para outra parte do documento ou para um apêndice sem afetar o fluxo principal. - Uma legenda pode ser associada ao elemento
<figure>
inserindo um<figcaption>
dentro dele (como o primeiro ou o último filho). O primeiro elemento<figcaption>
encontrado na figura é apresentado como legenda da figura.
Exemplos
Imagens
html
<!-- Apenas uma imagem -->
<figure>
<img src="favicon-192x192.png" alt="O lindo logotipo do MDN." />
</figure>
<!-- Imagem com legenda -->
<figure>
<img src="favicon-192x192.png" alt="O lindo logotipo do MDN." />
<figcaption>Logotipo MDN</figcaption>
</figure>
Trechos de codigo
html
<figure>
<figcaption>
Obtenha detalhes do navegador usando o <code>navigator</code>.
</figcaption>
<pre>
function NavigatorExample() {
var txt;
txt = "Nome do código do navegador: " + navigator.appCodeName + "; ";
txt+= "Nome do navegador: " + navigator.appName + "; ";
txt+= "Versão do navegador: " + navigator.appVersion + "; ";
txt+= "Cookies habilitados: " + navigator.cookieEnabled + "; ";
txt+= "Plataforma: " + navigator.platform + "; ";
txt+= "Cabeçalho do agente do usuário: " + navigator.userAgent + "; ";
console.log("Exemplo de Navegador", txt);
}
</pre>
</figure>
Citações
html
<figure>
<figcaption><b>Edsger Dijkstra:</b></figcaption>
<blockquote>
Se a depuração é o processo de remoção de bugs de software, então a
programação deve ser o processo de colocá-los.
</blockquote>
</figure>
Poemas
html
<figure>
<p style="white-space:pre">
Ofereça-me um discurso, encantarei seu ouvido, Ou como uma viagem de fadas
sobre o verde, Ou, como uma ninfa, com longos cabelos desgrenhados, Dança na
areia, e mas nenhum fundamento visto: O amor é um espírito todo compacto de
fogo, Não grosseiro para afundar, mas leve, e vai aspirar.
</p>
<figcaption><cite>Vênus e Adônis</cite>, de William Shakespeare</figcaption>
</figure>
Especificações
Specification |
---|
HTML Standard # the-figure-element |
Compatibilidade do navegador
BCD tables only load in the browser
Veja também
- O elemento
<figcaption>
.