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>:
- Utilize
<map>para criar áreas clicáveis em imagens. - Utilize
<figure>para agrupar imagens e legendas. - Forneça textos alternativos para todas as áreas clicáveis e imagens.
- Utilize CSS para personalizar a aparência.
- Certifique-se de que seus mapas de imagem e figuras sejam responsivos.
Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
