Etiqueta <figure> HTML

Definição e uso

<figure> a tag defina conteúdo autocontido, como ilustrações, gráficos, fotos, listas de código, etc.

Embora <figure> O conteúdo do elemento está relacionado ao conteúdo principal, mas sua posição é independente do fluxo principal do conteúdo. Se for removido, não deve afetar o fluxo do documento.

Dica:Use <figcaption> elemento Para <figure> Adicionar título ao elemento.

Veja também:

Manual de Referência do DOM HTML:Objeto Figure

Exemplo

Exemplo 1

Use o elemento <figure> para marcar imagens em documentos e o elemento <figcaption> para definir o título da imagem:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figura 1 - Trulli da região de Puglia, Itália.</figcaption>
</figure>

Experimente você mesmo

Exemplo 2

Defina estilos para <figure> e <figcaption> usando CSS:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figura 1 - Trulli da região de Puglia, Itália.</figcaption>
</figure>
</body>
</html>

Experimente você mesmo

Atributos globais

<figure> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<figure> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <figure> Elemento:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou o elemento pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Comentário: A etiqueta <figure> é uma nova etiqueta do HTML 5.