Tag HTML <area>

A tag <area> identifica as áreas ativas (coordenadas, forma, tamanho, etc.) do mapa de imagem, definido pela tag <map>. Ao clicar na área ativa da imagem, uma determinada ação é executada — por exemplo, navegar para uma página com informações detalhadas.

Esta página explica o que a <area> faz, como funciona o sistema de coordenadas coords, todos os valores de forma (incluindo poly e default), as regras de acessibilidade que você deve seguir e a limitação de layout responsivo que pega desenvolvedores de surpresa em projetos reais.

A tag <area> é sempre colocada dentro da tag <map>. As áreas ativas podem se sobrepor; nesse caso, a área que aparece depois na ordem do DOM é ativada quando clicada.

Por que e quando usar um mapa de imagem

Um mapa de imagem transforma partes de uma única <img> em links clicáveis separados. Cada <area> se torna seu próprio ponto de acesso com seu próprio href, de modo que uma imagem pode levar a vários destinos — pense em um diagrama clicável, uma planta baixa ou um mapa de regiões.

Você conecta uma imagem ao seu mapa usando o atributo usemap na <img>, que aponta para o name do mapa (por exemplo, usemap="#blockmap" corresponde a <map name="blockmap">).

Quando um mapa de imagem é uma boa escolha:

As regiões clicáveis estão genuinamente dentro de uma única imagem rasterizada (uma foto, um diagrama digitalizado) e não podem ser facilmente divididas em elementos separados.
As formas são irregulares (o contorno de um país, um ponto de acesso não retangular) para as quais uma área poly é a solução natural.

Quando preferir uma alternativa:

Pontos de acesso retangulares sobre conteúdo separado → basta organizar links individuais <a> (cada um envolvendo sua própria imagem ou bloco estilizado). Isso é mais flexível e responsivo por padrão.
Gráficos vetoriais / diagramas escaláveis → use SVG inline com elementos <a> dentro dele. Os pontos de acesso SVG escalam com o layout, suportam estilização ao passar o mouse/focar e são muito mais acessíveis do que formas <area> baseadas em pixels.
Botões de sobreposição simples → links CSS com posicionamento absoluto sobre a imagem escalam melhor do que coords fixas.

A grande contrapartida: as coordenadas da <area> são medidas em pixels fixos, portanto um mapa de imagem não se adapta quando a imagem é redimensionada por CSS responsivo (veja a seção de limitação responsiva e móvel abaixo).

Sintaxe

A tag <area> é vazia, o que significa que a tag de fechamento não é necessária. Mas em XHTML, a tag <area> deve ser fechada (<area />).

Exemplo da tag HTML `<area>`:

Tag HTML <area>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Experimente Você Mesmo »

Como funciona o sistema de coordenadas coords

Esta é a parte que os desenvolvedores mais frequentemente erram. Todos os valores de coords são deslocamentos em pixels medidos a partir do canto superior esquerdo da imagem — não da página e não do viewport. O primeiro eixo (x) aumenta para a direita; o segundo eixo (y) aumenta para baixo.

O significado dos números depende do shape:

rect — x1,y1,x2,y2: o canto superior esquerdo, depois o canto inferior direito.
circle — x,y,radius: o ponto central, depois o raio (tudo em pixels).
poly — x1,y1,x2,y2,...,xn,yn: uma lista ordenada de vértices; o navegador os conecta e fecha a forma automaticamente.
default — sem coords; a área cobre a imagem inteira.

Exemplo prático

Para uma imagem de 250 de largura e 150 de altura, um retângulo cobrindo seu quarto superior esquerdo é:

<area shape="rect" coords="0,0,125,75" alt="Top-left quarter" href="/top-left">

Leia assim: canto superior esquerdo em (0, 0), canto inferior direito em (125, 75). Um círculo centralizado no meio dessa mesma imagem com raio de 40 px é coords="125,75,40".

Como esses são pixels brutos, eles devem corresponder ao tamanho intrínseco (natural) da imagem, não a um tamanho de exibição redimensionado por CSS.

Exemplo de forma polígono (poly)

Use shape="poly" para qualquer ponto de acesso não retangular e não circular — um triângulo, uma seta, o contorno de um país. Liste os vértices em ordem; o navegador desenha linhas retas entre pontos consecutivos e fecha o caminho voltando ao primeiro ponto.

<!DOCTYPE html>
<html>
  <head>
    <title>Polygon image map</title>
  </head>
  <body>
    <p>Click inside the triangle:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"
         width="250" height="150" alt="Diagram" usemap="#shapemap" />
    <map name="shapemap">
      <!-- A triangle: top-center, bottom-left, bottom-right -->
      <area shape="poly" coords="125,20,30,130,220,130"
            alt="Triangle hotspot linking to the docs" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Os três pontos (125,20), (30,130) e (220,130) formam os cantos do triângulo; você não repete o primeiro ponto no final — a forma se fecha sozinha.

Atributos

Atributo	Valor	Descrição
alt	texto	Especifica um texto alternativo para a área ativa.
coords	x1,y1,x2,y2 \| x,y,radius \| x1,y1,...,xn,yn	Especifica as coordenadas da área ativa em pixels a partir do canto superior esquerdo da imagem. Os valores dependem da forma: `rect` (cantos superior esquerdo e inferior direito), `circle` (centro e raio), `poly` (vértices do polígono); omita para `default`.
download	filename	Indica que, ao clicar em uma área específica, o arquivo deve ser baixado.
href	URL	Especifica a referência para a navegação. Omita `href` para tornar a área inativa (sem link).
hreflang	language_code	Define o idioma do documento referenciado. Usado apenas com `href`.
nohref	(nenhum)	Obsoleto. Marcava uma área como sem link. Removido no HTML5 — em vez disso, simplesmente omita o atributo `href`.
rel	alternate \| author \| bookmark \| help \| license \| next \| nofollow \| noreferrer \| prefetch \| prev \| search \| tag	Estabelece uma relação entre o documento atual e o documento vinculado.
shape	rect \| circle \| poly \| default	Define a forma da área. `default` faz a área cobrir a imagem inteira.
target	_blank \| _self \| _top \| _parent \| frame_name	Especifica como o documento vinculado deve ser aberto. `frame_name` não é suportado em HTML5.
type	media_type	Especifica o tipo MIME do documento vinculado.

A tag <area> também suporta os Atributos Globais e os Atributos de Evento.

O valor shape="default"

shape="default" define uma área sem coordenadas que cobre a imagem inteira — tudo o que não foi reivindicado por uma área rect, circle ou poly mais específica. É útil como link de fallback ou alvo "clique em qualquer outro lugar".

<map name="catchall">
  <area shape="circle" coords="125,75,40" alt="Center hotspot" href="/center">
  <area shape="default" alt="Everywhere else" href="/elsewhere">
</map>

Como as áreas mais específicas que correspondem primeiro têm precedência, coloque default por último, para que capture apenas os cliques que nenhuma outra área trata.

Acessibilidade

A acessibilidade é a preocupação prática mais importante com mapas de imagem, pois a própria imagem não carrega texto. Cada ponto de acesso é invisível para um leitor de tela a menos que você o rotule.

alt é obrigatório em cada <area>. A especificação exige isso sempre que a área tem um href. Torne-o significativo: deve descrever para onde o link leva (o destino ou ação do link), não a imagem. Por exemplo, alt="Ver referência CSS", não alt="círculo".
Navegação por teclado: os navegadores expõem cada <area> como um link focalizável, portanto os usuários podem usar Tab para acessar cada ponto de acesso e ativá-lo com Enter. Isso só funciona se cada área tiver tanto um href quanto um alt claro — uma área sem alt é anunciada como um link sem rótulo, o que é uma barreira séria.
A imagem ainda precisa do seu próprio alt. Defina alt na <img> para descrever a imagem como um todo, separadamente dos rótulos de link por área.
Para gráficos complexos com muitas regiões, considere se uma lista de links <a> simples ou um SVG inline com links focalizáveis serviria melhor aos usuários de tecnologia assistiva do que pontos de acesso em pixels.

Limitação responsiva e móvel

As coordenadas da <area> são valores de pixel fixos vinculados ao tamanho intrínseco da imagem. Elas não escalam. No momento em que você torna a imagem fluida — por exemplo, com width: 100% ou max-width: 100% em CSS — a imagem visível é redimensionada, mas os pontos de acesso permanecem ancorados à grade de pixels original. As regiões clicáveis se afastam do que o usuário vê e, em telas móveis pequenas, podem se tornar minúsculas e difíceis de acertar.

O HTML simples não oferece solução nativa para isso. Na prática, você pode:

Evitar mapas de imagem em layouts responsivos e usar alternativas escaláveis — links <a> posicionados com CSS sobrepostos, ou um SVG inline cujos pontos de acesso <a> escalam com o layout.
Ou recalcular as coordenadas com JavaScript sempre que a imagem for redimensionada (uma dependência extra para manter).

Se o seu design precisar se adaptar a diferentes tamanhos de tela, prefira SVG ou links posicionados em vez de <area> desde o início.

Prática

What is the purpose of the HTML area tag and what are its attributes?

The HTML area tag is used to define areas in an image-map and its attributes include alt, coords, href, shape, and target.The HTML area tag is used to create sections or divisions in an HTML document and its attributes include id, class, and style.The HTML area tag is used for formatting text in an HTML document and its attributes include size, color, and font.The HTML area tag is used to create hyperlinks in an HTML document and its attributes include href, rel, and target.

Prática

For a circular hotspot, what do the three numbers in coords represent and where is the origin measured from?

Center x, center y, and radius, measured in pixels from the top-left corner of the image.Left, top, and width, measured in pixels from the top-left corner of the page.Radius, center x, and center y, measured as percentages of the viewport.Two corner points and a radius, measured from the center of the image.

Prática

Which shape value makes an area cover the entire image, and how do you mark an area as having no link in modern HTML?

Use shape with the value default, and omit the href attribute to make the area inactive.Use shape with the value full, and add the nohref attribute to make the area inactive.Use shape with the value rect, and set href to an empty string to make the area inactive.Use shape with the value poly, and add the disabled attribute to make the area inactive.

Por que e quando usar um mapa de imagem

Sintaxe

Exemplo da tag HTML <area>:

Como funciona o sistema de coordenadas coords

Exemplo prático

Exemplo de forma polígono (poly)

Atributos

O valor shape="default"

Acessibilidade

Limitação responsiva e móvel

Prática

Exemplo da tag HTML `<area>`: