Figcaption Tag Em Html

Este post discutirá Tag Figcaption Html com exemplos e referências relevantes. Este post contém muitas informações que você pode usar como uma ferramenta de aprendizado.

A tag HTML <figcaption> é usada para fornecer uma legenda ou título para um elemento <figure> , que é usado para representar conteúdo, como imagens, ilustrações, diagramas, trechos de código, etc. A tag <figcaption> deve ser colocada imediatamente após a tag de abertura <figure> e antes do conteúdo que ela representa.

Em um documento, utilize o elemento <figure> para marcar uma imagem e o elemento <figcaption> para designar uma legenda:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/samuel-ferrara-1527pjeb6jg-unsplash.jpg" alt="theoxbow" style="width:100%">
<figcaption>Fig.1  The Oxbow, Thomas Cole.</figcaption>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para estilizar <figure> e <figcaption> aplique CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 2px #000 dotted;
padding: 5px;
margin: auto;
}
figcaption {
background-color: aqua;
color: grey;
font-style:bold;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/samuel-ferrara-1527pjeb6jg-unsplash.jpg" alt="theoxbow" style="width:100%">
<figcaption>Fig.1  The Oxbow, Thomas Cole.</figcaption>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo é usar em um bloco de código, onde você pode explicar a finalidade do trecho de código:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<figure>
<figcaption>A simple function to calculate the area of a circle</figcaption>
<pre><code>
function calculateArea(radius) {
return Math.PI * Math.pow(radius, 2);
}
</code></pre>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Figcaption Tag em Html:

Figcaption Uso Html

Figcaption A tag Html <figcaption> fornece uma legenda para um elemento <figure> .

A tag <figcaption> pode ser especificada como o primeiro ou o último filho do elemento <figure> .

Compatibilidade do navegador

De acordo com a tabela, os números indicam a primeira versão do navegador para acomodar o elemento completamente.

Elemento
<figcaption>	8,0	9,0	4.0	5.1	11,0

Atributos

Global

Quando falamos em Figcaption Html então, os Atributos Globais em HTML são de fato aceitos pela Tag figcaption <figcaption> .

Evento

Os Atributos de Evento em HTML também são aceitos pela Tag figcaption <figcaption> .

CSS predefinido

Os navegadores geralmente renderizam o elemento <figcaption> com os valores padrão correspondentes:

figcaption {
display: block;
}