Estou fazendo o curso Layouts responsivos: trabalhando com layouts mobile e o instrutor usa as tags figure e figcaption pra fazer o design da foto. Porque a tag figure? Não seria melhor criar uma section para uma imagem + link?
Estou fazendo o curso Layouts responsivos: trabalhando com layouts mobile e o instrutor usa as tags figure e figcaption pra fazer o design da foto. Porque a tag figure? Não seria melhor criar uma section para uma imagem + link?
Olá Jeanna, tudo certo?
O uso da tag figure
é utilizada com o objetivo de contribuir para a semântica do código.
Essa tag desempenhará o mesmo papel que uma section
por exemplo, porém ela é própria para englobar conteúdos relacionados a uma imagem ou legenda de uma imagem, ou seja, esse é a sua maior função. Enquanto que a section
pode englobar diversos outros elementos sem se preocupar muito quem são esses elementos, não tendo preocupação com a especificidade.
Existem diversas formas de contribuir com a semântica de um projeto e isso é importante pois favorece a inclusão e acessibilidade na Web e também o ranqueamento do seu projeto nos mecanismos de busca (SEO).
Caso queira ler mais sobre isso, recomendo os conteúdos abaixo, são super completos e abordam em detalhes os pontos que conversamos.
Espero ter ajudado, em caso de dúvidas ou dificuldades, estamos por aqui!
Abraços e bons estudos :)
Oi, Beatriz! Muuuito obrigada pela resposta super completa. Uma questão: no caso do exemplo ele usa essa tag para fazer um "atalho" para uma postagem. Ainda assim o uso da tag figure é o mais recomendado? Imaginei que essa tag seria usada apenas quando se tratasse de uma imagem aletória ao longo de um site.
Olá Jeanna, espero que esteja bem.
É recomendado sim, por mais que seja um atalho para outra página, esse card da imagem com legenda é bastante informativo sobre o assunto desse direcionamento e sendo assim, o ideal é preservar a semântica mesmo. Além disso, é um contexto em que fazer dessa forma contribui bastante para as pessoas com deficiência que utilizam leitores de tela.