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/

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay