Imagens no HTML parte 2

Tempo de leitura: 3 minutos

As imagens são elementos fundamentais na criação de páginas web envolventes e informativas. Além da tag <img> que já conhecemos, o HTML nos oferece outras ferramentas poderosas para trabalhar com imagens de forma mais complexa e semântica.

Neste artigo, vamos explorar as tags <map> e <figure>, que nos permitem criar mapas de imagem interativos e agrupar imagens com suas respectivas legendas, respectivamente.

A Tag `<map>`: Criando Áreas Clicáveis em Imagens

A tag <map> permite criar áreas clicáveis dentro de uma imagem. Cada área clicável é definida por um elemento <area> dentro do elemento <map>. Essa funcionalidade é útil para criar botões personalizados, menus visuais ou qualquer outro tipo de interação com a imagem.

Sintaxe:

HTML

<img src="mapa.png" usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="0,0,80,80" href="pagina1.html" alt="Link para a página 1">
  <area shape="circle" coords="100,50,30" href="#" alt="Botão">
</map>

usemap="#mapa": Associa a imagem ao mapa com o nome “mapa”.
shape: Define a forma da área clicável (rect, circle, poly, etc.).
coords: Especifica as coordenadas da área clicável.
href: Define o destino do link quando a área é clicada.
alt: Fornece um texto alternativo para a área clicável.

A Tag `<figure>`: Agrupando Imagens e Legendas

A tag <figure> é utilizada para agrupar uma imagem com sua legenda, criando uma estrutura semântica mais clara e facilitando a acessibilidade.

Sintaxe:

HTML

<figure>
  <img src="imagem.jpg" alt="Uma bela paisagem">
  <figcaption>Uma vista deslumbrante da natureza.</figcaption>
</figure>

<img>: Contém a imagem.
<figcaption>: Contém a legenda da imagem.

A Importância da Semântica em `<map>` e `<figure>`

Acessibilidade: As tags <map> e <figure> ajudam os leitores de tela a entender melhor o conteúdo da página, fornecendo informações contextuais sobre as imagens.
SEO: Uma estrutura semântica bem definida melhora o SEO, pois os mecanismos de busca podem entender melhor o conteúdo da página e indexá-lo de forma mais precisa.
Manutenção: Ao utilizar essas tags, você torna o seu código mais organizado e fácil de manter.

Exemplo Completo: Uma Galeria de Imagens com Legendas e Áreas Clicáveis

HTML

<figure>
  <img src="galeria1.jpg" usemap="#galeria1" alt="Galeria de fotos">
  <figcaption>Nossa galeria de fotos</figcaption>
  <map name="galeria1">
    <area shape="rect" coords="10,10,100,100" href="foto1.html" alt="Foto 1">
    <area shape="rect" coords="120,10,210,100" href="foto2.html" alt="Foto 2">
  </map>
</figure>

Neste exemplo, criamos uma galeria de fotos utilizando uma imagem e duas áreas clicáveis onde cada área levará o usuário para suas respectivas páginas.

Essa abordagem cria um comportamento semelhante ao que você encontra nas nossas recomendações no fim de cada artigo.

Conclusão

As tags <map> e <figure> são ferramentas poderosas para criar páginas web mais interativas e semânticas. Ao utilizar essas tags de forma correta, você pode melhorar a experiência do usuário, a acessibilidade e o SEO do seu site.

Dicas para utilizar <map> e <figure>: