<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 julho de 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
<figure>
<img
src="/shared-assets/images/examples/elephant.jpg"
alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure>
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
}
img {
max-width: 220px;
max-height: 150px;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
| 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 | Nenhuma, tanto a tag inicial quanto a final são obrigatórias. |
| 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 # the-figure-element |
Compatibilidade do navegador
Loading…
Veja também
- O elemento
<figcaption>.