Como utilizar o elementos semânticos figure e figcaption

Neste post vamos aprender a utilizar dois elementos semânticos figure e figcaption, que vieram no HTML5, eles servem respectivamente para exibir uma imagem e a descrição da mesma.

Como utilizar os elementos semânticos figure e figcaption?

Primeiramente vamos falar de figure, este serve para exibirmos imagens nas páginas HTML de forma semântica

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Dentro da tag <figure>, inserimos uma tag <img> com a imagem e opcionalmente uma tag <figcaption> com a descrição/legenda da imagem

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

O que é importante também citar é que a tag figure independe do contexto da página

Sendo assim o fluxo principal ou assunto principal, independe desta imagem

Fazendo com que ela possa ser reaproveitada em mais lugares do site

E claro que os elementos semânticos figure e figcaption adicionam muita semântica ao nosso código ao serem aliados numa página web

Utilizando figure e figcaption na prática:

Vamos agora ver a estrutura completa das tags figure e figcaption, em um suposto projeto

HTML:

<figure>
    <img src="imagem.png">
    <figcaption>Capa do post de elementos semânticos figure e figcaption</figcaption>
</figure>

Resultado final:

Perceba que visualmente toda essa estrutura poderia ser trocada por uma div no lugar da figure e um p no lugar de figcaption

Mas para fins de semântica no HTML a abordagem utilizada neste post é mais recomendado

E visto que um HTML bem escritor e semântico possui mais relevância para o Google, seria ideal você se adaptar aos elementos semânticos em seus futuros projetos

Conclusão

Neste post vimos que a tag figure serve para exibir imagens de qualquer tipo em nosso site de forma semântica

Dentro da tag figure devemos adicionar uma tag img, que contem o link da imagem

E opcionalmente a tag figcaption para adicionarmos uma descrição a imagem

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 

Referências: MDN