Como Criar uma 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>

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>

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>

Resultado:

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/