<area>: O Elemento AREA
Última atualização: 2026-10-13
<area>O Elemento AREA
Define uma região clicável (retângulo, círculo ou polígono) dentro de um <map>; cada area define a forma, as coordenadas e o link de destino.
| Categoria | Links e Mídia |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Auto-fechante — nenhuma tag de fechamento necessária |
| Status | Padrão |
📝 Sintaxe
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
shape | Region shape: default, rect, circle or poly. | |
coords | Coordinates for the shape, in pixels, comma-separated. | |
href | Target URL when the region is clicked. | |
alt | Alternative text for the region (required for accessibility). | |
target | Where to open the link, e.g. _blank. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <area> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： area é um elemento vazio; deve ficar dentro de <map> e ser referenciado pelo usemap de um <img>.
❓ Perguntas Frequentes
QPara que serve a tag area?
A
<area> define «áreas clicáveis» de uma imagem dentro de <map>: o shape (rect/circle/poly) e as coordenadas coords circunscrevem a região, e o clique salta para o link do href. Cenários clássicos: navegação por regiões em mapas e interação em painéis de instrumentos.QComo calcular as coordenadas de area?
AAs coordenadas são em pixels a partir do canto superior esquerdo (0,0):
rect recebe dois pares x,y (canto superior esquerdo e inferior direito); circle, o x,y do centro mais o raio; poly, uma série de vértices. Meça no layout e preencha direto; ao redimensionar a imagem, as áreas não acompanham sozinhas (exige JS ou uma solução com srcset).Qarea precisa de alt?
ASim (quando tem href).
<area> é um link, e o alt é o seu «texto do link» — é por ele que o leitor de tela anuncia a função da área. Áreas sem alt são zonas mortas, totalmente inutilizáveis para usuários com deficiência visual.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
