HTML <figcaption> Tag


Exemplo

Use um elemento <figure> para marcar uma foto em um documento e um elemento <figcaption> para definir uma legenda para a foto:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Mais exemplos de "Experimente você mesmo" abaixo.


Definição e uso

A <figcaption>tag define uma legenda para um elemento <figure> .

O <figcaption>elemento pode ser colocado como o primeiro ou último filho do elemento <figure>.


Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.

Element
<figcaption> 8.0 9.0 4.0 5.1 11.0

Atributos Globais

A <figcaption>tag também suporta os Atributos Globais em HTML .


Atributos do evento

A <figcaption>tag também suporta os atributos de evento em HTML .



Mais exemplos

Exemplo

Use CSS para estilizar <figure> e <figcaption>:

<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="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

</body>
</html>

Páginas relacionadas

Referência HTML DOM: Figcaption Object


Configurações padrão de CSS

A maioria dos navegadores exibirá o <figcaption>elemento com os seguintes valores padrão:

figcaption {
  display: block;
}