Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
<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 porconteú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 aceiteContúdo de fluxo. |
| Função ARIA implícita | figure |
| Funções ARIA permitidas | Com nenhumfigcaptiondescendente:qualquer, caso contrário, não há papéis permitidos |
| interface DOM | HTMLElement |
Atributos
Este elemento inclui apenas osatributos 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> 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
Veja também
- O elemento
<figcaption>.