<map>: O Elemento MAP
Última atualização: 2026-10-13
<map>O Elemento MAP
Define um mapa de imagem no lado do cliente; elementos <area> filhos marcam regiões clicáveis, conectados via usemap de um <img>.
| 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 | Sim — requer fechamento </map> tag |
| Status | Padrão |
📝 Sintaxe
<map name="planet">
<area shape="circle" coords="..." href="...">
</map>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
name | Map name; an |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <map> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： map não mostra nada por si só; precisa de um <img usemap> e elementos <area> filhos.
❓ Perguntas Frequentes
Qmap precisa de quais elementos para funcionar?
A
<map> é o contêiner de áreas e trabalha com uma <img usemap='#mapid'> e várias <area>: o usemap da img aponta para o name do map (com #), e as areas do map definem cada região. Os três são indispensáveis.QQual é a diferença entre name e id de map?
AO atributo usemap referencia o valor de
name do map (a especificação também pede um id igual, por compatibilidade). O mais seguro é escrever os dois com o mesmo valor: <map name='br' id='br'>.QÁreas clicáveis em imagem ainda são recomendadas?
AEm pequena escala ainda têm valor (ilustrações interativas, mapas retrô), mas o mainstream migrou para «vários elementos posicionados sobre a imagem» ou links embutidos em SVG — o SVG escala de forma adaptativa, as áreas podem ser estilizadas isoladamente e a manutenção é muito mais barata. Para novos gráficos interativos, SVG primeiro.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
