Meta tags:
description=A tag map define um mapa de imagem com áreas ativas clicáveis. Veja exemplos e como utilizá-la corretamente.;

Headings (most frequently used words):

map, tag, html, quando, usar, como, se, conecta, uma, imagem, definindo, regiões, clicáveis, com, area, sintaxe, atributos, acessibilidade, não, prática, exemplo, da,

Text of the page (most frequently used words):
html (72), map (33), imagem (29), area (20), svg (20), com (19), não (18), para (17), alt (16), aprender (15), uma (14), tag (13), coords (13), href (12), clicáveis (11), shape (11), #atributos (10), regiões (10), mapa (10), name (10), planets (10), que (9), circle (9), canvas (9), w3docs (8), css (8), quando (8), como (8), elementos (8), link (8), por (8), usemap (8), região (7), tags (7), html5 (6), cada (6), são (6), todos (5), sobre (5), áreas (5), img (5), atributo (5), introdução (5), formatter (5), color (5), code (4), generator (4), prática (4), snippets (4), usar (4), elemento (4), define (4), lado (4), cliente (4), página (4), sem (4), the (4), title (4), rect (4), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), javascript (3), web (3), acessibilidade (3), mais (3), ser (3), links (3), acessível (3), pixels (3), zonas (3), lugar (3), teclado (3), área (3), texto (3), você (3), valor (3), copiar (3), body (3), https (3), www (3), default (3), head (3), exemplo (3), escrito (3), triangle (3), region (3), 120 (3), poly (3), coordenadas (3), url (3), único (3), referência (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), contato (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), sintaxe (2), definindo (2), conecta (2), this (2), page (2), mark (2), main (2), definem (2), pode (2), usada (2), definir (2), verdadeiro (2), conforme (2), descrito (2), vinculada (2), veja (2), também (2), âncoras (2), destinos (2), funcionam (2), forma (2), clicável (2), esta (2), responsiva (2), corretamente (2), totalmente (2), valores (2), tamanho (2), intrínseco (2), redimensionada (2), layout (2), evite (2), onde (2), algumas (2), precisam (2), será (2), mapas (2), apenas (2), pequenas (2), ela (2), pelo (2), abrir (2), círculo (2), destino (2), exatamente (2), vazio (2), regras (2), globais (2), nome (2), quiz (2), blockmap (2), 126 (2), media (2), png (2), src (2), logo (2), doctype (2), square (2), superior (2), esquerdo (2), toda (2), nenhum (2), retângulo (2), significado (2), obrigatório (2), dois (2), descrevem (2), sua (2), estar (2), dentro (2), deve (2), ele (2), mercury (2), sun (2), diferentes (2), accept (2), dir (2), formulários (2), tutorial (2), imagens (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, empresa, try, tutoriais, gratuitos, desde, 2014, next, previous, yes, was, helpful, verificar, contém, suportada, criar, entender, desenhe, formas, reais, escaláveis, estilizáveis, envolva, opção, flexível, diagramas, complexas, inline, posicione, posicionamento, absoluto, porcentagens, isso, escala, sobrepostas, maioria, das, necessidades, modernas, existem, alternativas, melhores, construa, verdade, forem, botões, menus, qualquer, coisa, complexa, fixos, vinculados, eles, escalam, fazendo, saírem, for, responsivo, única, raster, foto, diagrama, planta, baixa, digitalizada, retangulares, circulares, direcionar, algum, uso, razoável, recurso, antigo, ainda, mas, adequam, conjunto, restrito, casos, atualmente, formatos, irregulares, difíceis, clicar, mouse, toque, ponteiro, assistivo, dependa, muito, possuem, torna, foco, via, tab, colocar, interatividade, pois, navegação, funciona, automaticamente, útil, azul, faça, descrever, leitores, tela, anunciam, seu, fazem, ausente, deixa, rótulo, todo, precisa, significativo, visuais, menos, torne, acessíveis, portanto, importantes, utiliza, mapname, descrição, experimente, mesmo, 114, start, basic, learn, book, block, height, 145, width, uploads, 0001, 0f94cf189afcdc39c4df2a73d230d1a7425ee66d, click, one, items, watch, closer, document, vem, pares, conteúdo, entre, abertura, fechamento, 160, 200, through, three, points, round, centered, with, radius, rectangle, from, shapesmap, todas, medidas, relativas, partir, canto, coberta, outra, lista, pontos, formando, polígono, par, vértice, ponto, central, raio, cantos, inferior, direito, formato, depende, etc, _self, _blank, target, alternativo, está, presente, tipo, finalidade, geometria, demais, nomes, corresponderem, simplesmente, renderizada, erro, exibido, bug, silencioso, bastante, comum, colocado, outro, terá, efeito, devem, documento, corresponderá, diferenciam, maiúsculas, minúsculas, fragmento, prefixo, somente, vinculação, ter, mente, aponta, esse, inicial, faz, nada, meio, corresponder, referenciado, explica, vinculado, requisitos, ferramenta, certa, chamado, porque, navegador, interpreta, renderiza, localmente, necessária, nenhuma, ida, servidor, determinar, qual, foi, clicada, cujas, apontam, vez, marca, várias, zona, descrita, ficam, ativas, utilizá, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, controls, contenteditable, content, async, attribute, reference, forms, vídeos, youtube, multimídia, class, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, text, path, polyline, polygon, linha, elipse, gradientes, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, style, strong, strike, span, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, legend, label, keygen, kbd, isindex, ins, input, iframe, hgroup, header, frameset, frame, form, footer, font, figure, figcaption, fieldset, embed, div, dialog, dfn, details, del, datalist, data, colgroup, col, cite, center, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, applet, address, acronym, abbr, evento, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, navegadores, áudio, vídeo, semânticos, computercode, caminhos, arquivo, estilos, scripts, blocos, tabelas, comentários, cores, listas, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos, aprenda,

Text of the page (random words):
tag html map aprenda html w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset tag html map a tag map define um mapa de imagem com áreas ativas clicáveis veja exemplos e como utilizá la corretamente a tag html map define um mapa de imagem do lado do cliente uma imagem cujas diferentes regiões apontam para destinos diferentes em vez de um único link para toda a imagem você marca várias zonas clicáveis sobre ela cada zona é descrita por um elemento area e todos os elementos area ficam dentro de um único map é chamado de mapa de imagem do lado do cliente porque o navegador interpreta e renderiza as regiões localmente não é necessária nenhuma ida ao servidor para determinar qual região foi clicada esta página explica como um map é vinculado à sua imagem como definir as regiões clicáveis com area os requisitos de acessibilidade e quando um mapa de imagem é e não é a ferramenta certa como o map se conecta a uma imagem um map não faz nada por si só ele deve ser referenciado por uma imagem por meio de dois atributos que precisam corresponder no map o atributo name por exemplo map name planets no img o atributo usemap que aponta para esse nome com um inicial por exemplo img usemap planets img src planets png alt the planets usemap planets map name planets area shape rect coords 0 0 82 126 alt sun href sun html area shape circle coords 90 58 3 alt mercury href mercury html map copiar regras de vinculação para ter em mente o prefixo é obrigatório somente em usemap o valor de name é escrito sem o o valor de usemap é escrito com ele é uma referência de fragmento name planets usemap planets os valores diferenciam maiúsculas de minúsculas usemap planets não corresponderá a name planets o name deve ser único no documento e não pode estar vazio os elementos area devem estar dentro do map um area colocado em outro lugar não terá efeito se os nomes não corresponderem exatamente a imagem simplesmente é renderizada sem regiões clicáveis e nenhum erro é exibido um bug silencioso bastante comum definindo regiões clicáveis com area cada região é um elemento area dois atributos descrevem sua geometria e os demais descrevem o link atributo finalidade shape tipo de região rect circle poly ou default coords coordenadas que definem a região em pixels css href url de destino da região alt texto alternativo para a região obrigatório quando href está presente target onde abrir o link _blank _self etc o significado de coords depende de shape shape formato de coords significado rect x1 y1 x2 y2 cantos superior esquerdo e inferior direito de um retângulo circle x y r ponto central x y e raio r poly x1 y1 x2 y2 x3 y3 uma lista de pontos formando um polígono cada par é um vértice default nenhum toda a imagem não coberta por outra área todas as coordenadas são medidas a partir do canto superior esquerdo da imagem 0 0 em pixels relativas ao tamanho intrínseco da imagem map name shapesmap rectangle from 0 0 to 60 60 area shape rect coords 0 0 60 60 alt square region href square html circle centered at 120 30 with radius 25 area shape circle coords 120 30 25 alt round region href circle html triangle through three points area shape poly coords 160 0 200 60 120 60 alt triangle region href triangle html map copiar sintaxe a tag map vem em pares o conteúdo é escrito entre as tags de abertura map e fechamento map exemplo da tag html map tag html map doctype html html head title title of the document title head body p click on the logo or on one of the logo items to watch it closer p img src uploads media default 0001 01 0f94cf189afcdc39c4df2a73d230d1a7425ee66d png width 145 height 126 alt block usemap blockmap map name blockmap area shape circle coords 45 58 30 alt html book href https www w3docs com learn html html area shape circle coords 88 64 15 alt html quiz href https www w3docs com quiz start html basic area shape circle coords 114 67 14 alt html snippets href https www w3docs com snippets html html map body html copiar experimente você mesmo atributos atributos valor descrição name mapname define o nome de um mapa de imagem o elemento map também utiliza os atributos globais acessibilidade os mapas de imagem são totalmente visuais a menos que você os torne acessíveis portanto algumas regras são importantes todo area com link precisa de um alt significativo os leitores de tela anunciam cada área pelo seu texto alt exatamente como fazem para links um alt vazio ou ausente em uma área clicável deixa o link sem rótulo faça o alt descrever o destino não a imagem abrir a página de contato é mais útil do que círculo azul a navegação por teclado funciona automaticamente para áreas que possuem um href cada uma se torna um link com foco acessível via tab evite colocar interatividade apenas em uma região sem href pois ela não será acessível pelo teclado não dependa de zonas clicáveis muito pequenas regiões pequenas ou com formatos irregulares são difíceis de clicar com mouse toque ou ponteiro assistivo quando usar e quando não usar os mapas de imagem do lado do cliente são um recurso antigo e ainda funcionam mas se adequam apenas a um conjunto restrito de casos atualmente uso razoável uma única imagem raster uma foto um diagrama uma planta baixa digitalizada onde algumas regiões retangulares ou circulares precisam direcionar para algum lugar e a imagem não será redimensionada de forma responsiva evite map quando o layout for responsivo os valores de coords são pixels fixos vinculados ao tamanho intrínseco da imagem eles não escalam quando a imagem é redimensionada com css fazendo as zonas clicáveis saírem do lugar as regiões forem botões menus ou qualquer coisa complexa construa as com html css de verdade para a maioria das necessidades modernas existem alternativas melhores âncoras sobrepostas com css posicione elementos a com posicionamento absoluto em porcentagens sobre uma imagem responsiva isso escala corretamente e é totalmente acessível svg inline desenhe formas como elementos reais escaláveis e estilizáveis e envolva cada forma clicável em um a esta é a opção mais flexível para diagramas e regiões complexas veja também links html para entender como âncoras e destinos de link funcionam prática prática o que é verdadeiro sobre a tag html map conforme descrito na página web vinculada o que é verdadeiro sobre a tag html map conforme descrito na página web vinculada a tag html map é usada para criar um mapa de imagem a tag map não é suportada no html5 a tag map define um mapa de imagem do lado do cliente um mapa de imagem é uma imagem com áreas clicáveis a tag map não pode ser usada com elementos area para definir as áreas clicáveis no mapa de imagem o elemento map não contém um ou mais elementos area que definem as áreas clicáveis no mapa de imagem verificar was this page helpful yes no previous main next mark on this page como o map se conecta a uma imagem definindo regiões clicáveis com area sintaxe atributos acessibilidade quando usar e quando não usar prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores