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
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
Perfeito! Bem objetivo.
valeuu!