Figura Tag em Html

Este artigo discute a tag de figura HTML . Isso satisfaria os requisitos para o aprendizado.

A tag <figure> em HTML é usada para agrupar e encapsular conteúdo de mídia, como imagens, vídeos, áudio ou outros tipos de mídia. O elemento <figure> é normalmente usado em conjunto com o elemento <figcaption> para fornecer uma legenda ou descrição para o conteúdo de mídia.

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/jackson-sophat-_t-l5FFH8VA-unsplash.jpg" alt="theoxbow" style="width:100%">
<figcaption>Fig.1 The Oxbow, Thomas Cole.</figcaption>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O código a seguir pode ser aplicado para estilizar <figure> e <figcaption> usando 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: grey;
color: black;
font-style:bold;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/jackson-sophat-_t-l5FFH8VA-unsplash.jpg" alt="theoxbow" style="width:100%">
<figcaption>Fig.1 The Oxbow, Thomas Cole.</figcaption>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você também pode usar o elemento <figure> para agrupar um vídeo e sua legenda:

Example: 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<figure>
<video src="https://mrexamples.com/wp-content/uploads/2023/03/y2meta.com-CGI-Animated-Short-Film_-_Bear-With-Me-Love-Story_-by-Rodrigo-Chapoy-_-CGMeetup-1080p.mp4" width="500px" height="300px" controls></video>
<figcaption>A short film featuring bear and birds</figcaption>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Uso de marca de figura HTML

Figura Html A tag <figura> contém conteúdo especializado, como ilustrações, diagramas, imagens, listas de códigos, etc.

Embora o elemento <figure> tenha uma conexão com o fluxo principal do documento, sua posição é independente, e sua remoção não deve ter nenhum efeito sobre ele.

Conselho: Para adicionar uma legenda ao <figure> , o elemento <figcaption> é aplicado.


Compatibilidade do navegador

De acordo com a tabela, os números indicam a primeira versão do navegador a acomodar totalmente o elemento HTML Figure Tag .

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

Atributos

Global

A figura da tag <figure>é totalmente capaz de aceitar Atributos Globais em HTML.

Evento

A figura do Tag <figure> pode lidar com Atributos de Evento em HTML .


Configurações padrão de CSS

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

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

Benefícios da tag de figura HTML

A tag <figure> em HTML é usada para agrupar uma imagem, ilustração, diagrama ou qualquer outro tipo de mídia com sua legenda ou descrição. Aqui estão alguns benefícios de usar a tag <figure> :

  • Ao usar a tag <figure> , você pode fornecer uma legenda clara e descritiva para a mídia associada a ela, o que pode ajudar a melhorar a acessibilidade de sua página da Web para usuários com deficiências.
  • A tag <figure> fornece um significado semântico ao seu conteúdo, o que pode ajudar os mecanismos de pesquisa a entender melhor sua página da Web e seu conteúdo.
  • A tag <figure> permite que você aplique estilos à mídia e à legenda juntos, o que pode ajudar a melhorar a aparência geral da sua página da web.
  • Ao agrupar mídias relacionadas e suas legendas com a tag <figure> , você pode organizar melhor seu conteúdo e facilitar a compreensão dos usuários.
  • A tag <figure> faz parte da especificação HTML5 e é amplamente suportada por navegadores modernos, tornando-a uma escolha segura e à prova de futuro para estruturar seu conteúdo.
Deixe sua reação abaixo para agradecer nosso esforço ou nos sugerir algumas melhorias para o aprimoramento deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone