Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Tag Figure

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?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Olá Jeanna, tudo certo?

O uso da tag figure é utilizada com o objetivo de contribuir para a semântica do código.

E como isso é feito?

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.

Ok e porque é importante pensar na semântica?

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.

solução!

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.