DEV Community

Cover image for Imagem Semântica em HTML
Daniel Nogueira
Daniel Nogueira

Posted on • Edited on

1 1

Imagem Semântica em HTML

É comum conhecer a tag <img> para adicionar imagens em HTML, mas existe uma maneira mais semântica para isso, que é usando a tag <figure>.

Essa tag funciona como uma tag <section>, que engloba outros elementos. E no caso da tag <figure>, ela é própria para englobar conteúdo de imagem.

Primeiro, crie a tag <figure>:

<figure>

</figure>
Enter fullscreen mode Exit fullscreen mode

Agora, adicione a tag <img> para especificar o caminho do arquivo de imagem a ser usado:

<figure>
  <img src="cristo-redentor.jpg" title="Cristo Redentor" alt="Cristo Redentor">
</figure>
Enter fullscreen mode Exit fullscreen mode

Por fim, a tag <figure> permite adicionar uma legenda na imagem. Para isso, usamos a tag <figcaption>:

<figure>
  <img src="cristo-redentor.jpg" title="Cristo Redentor" alt="Cristo Redentor">
  <figcaption>Fig.1 - Cristo Redentor no Rio de Janeiro</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

Resultado:

Uso da tag figure

Por que isso é importante?

O uso de tags semânticas é fundamental para promover a inclusão e acessibilidade na web, além de melhorar o posicionamento da aplicação nos motores de busca (SEO).

Esse artigo abordou

  • Tag <figure>
  • Tag <figcaption>
  • Imagens semânticas

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more