Imagens no HTML parte 2

Mais imagens no HTML: Na primeira parte, dominamos a tag <img> e as técnicas de otimização (loading, srcset, <picture>). Agora, vamos explorar tags HTML que adicionam estrutura e interatividade às imagens e mídias, garantindo uma semântica rica e acessível.

Focaremos em dois elementos que cumprem papéis muito distintos:

• <figure>: Para agrupar mídias com legendas e dar semântica de ilustração.
• <map>: Para criar áreas clicáveis em uma única imagem.

1. O Elemento <figure>: Agrupando Mídia e Legenda

O elemento <figure> é usado para agrupar conteúdo que é referenciado a partir do texto principal, mas que poderia ser movido para outro local sem afetar o fluxo do documento. É a melhor forma de criar uma ilustração com contexto.

Sintaxe e Componentes

O elemento <figure> geralmente contém a mídia e a tag de legenda:

Exemplo Prático (Imagem e Legenda):

HTML

<figure>
  <img src="paisagem.jpg" alt="Foto de um vale ao pôr do sol." width="600" height="400">
  <figcaption>Figura 1.1: Uma vista deslumbrante da natureza capturada na viagem.</figcaption>
</figure>

💡 Uso Avançado: O <figure> não se limita a imagens. É ideal para agrupar blocos de código, gráficos, diagramas ou citações que precisam de uma legenda ou crédito.

Exemplo (Figura com Código):

HTML

<figure>
  <pre>
    <code>function soma(a, b) { return a + b; }</code>
  </pre>
  <figcaption>Exemplo 2.5: Função JavaScript para somar dois números.</figcaption>
</figure>

    function soma(a, b) { return a + b; }
  

2. O Elemento <map>: Criando Mapas de Imagem Clicáveis

A tag <map> permite definir áreas clicáveis (hotspots) em uma única imagem, transformando a imagem em uma interface interativa.

Sintaxe e Componentes

1. Imagem: A tag <img> precisa do atributo usemap que aponta para o name do mapa (usando #).
2. Mapa: A tag <map> precisa de um atributo name correspondente ao usemap.
3. Áreas: O elemento <area> define cada região clicável.

Exemplo Prático (Retângulo e Círculo):

HTML

<img src="mapa-regioes.png" usemap="#mapa-vendas" alt="Mapa com áreas de vendas">

<map name="mapa-vendas">
  <area shape="rect" coords="0,0,100,100" href="regiao-norte.html" alt="Vendas Região Norte">
  
  <area shape="circle" coords="200,50,30" href="promocao.html" alt="Promoção do Mês">
</map>

⚠️ Nota sobre <map>: Embora seja válido, o uso de mapas de imagem está em declínio. Para interações complexas, a maioria dos desenvolvedores prefere sobrepor links transparentes usando CSS (o que é mais fácil de tornar responsivo).

🚀 A Importância da Semântica para Acessibilidade

Ambas as tags contribuem significativamente para a acessibilidade:

• <figure>: Ajuda usuários de leitores de tela a entender que o conteúdo (imagem, código, etc.) é uma ilustração e, se for movido, o fluxo de leitura do texto principal não será interrompido.
• <area> e alt: Sem o alt em cada <area>, usuários que não enxergam não teriam ideia de onde cada clique os levaria em um mapa de imagem. É obrigatório para a acessibilidade.

✅ Conclusão

As tags <figure> e <map> são ferramentas especializadas para gerenciar a complexidade da mídia em HTML. O <figure> é uma melhor prática semântica para qualquer ilustração ou bloco de código com legenda. Já o <map> oferece uma solução nativa para interatividade dentro de imagens. Ao combiná-las com a otimização da tag <img>, você cria páginas que são ricas visualmente, altamente acessíveis e bem estruturadas.

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: