Last Updated : 12 Jul, 2025
The <map> tag in HTML is used to define an image map. It is an image with clickable areas that link to different destinations or perform specific actions. The <map> tag is typically used in combination with the <img> tag and <area> tags to create these interactive regions. Each <area> tag within a <map> defines a shape (rectangle, circle, or polygon) and specifies the coordinates for the clickable area.
Syntax HTML
<img src="image.jpg" usemap="#mapname" alt="Descriptive Image">
<map name="mapname">
<area shape="rect" coords="x1,y1,x2,y2"
href="link1.html" alt="Rectangle Area">
<area shape="circle" coords="x,y,radius"
href="link2.html" alt="Circle Area">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..."
href="link3.html" alt="Polygon Area">
</map>
Where -
Example: This example demonstrates a simple image map with rectangular clickable areas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML map Tag</title>
</head>
<body style="text-align: center;">
<p>
Click on Images where the
cursor clickable
</p>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"
alt="Geeks_logo"
usemap="#gfg">
<map name="gfg">
<area href="https://www.geeksforgeeks.org/"
coords="55,76,129,76,128,126,99,126,100,103,82,104,83,125,54,125,51,104"
shape="poly">
</map>
</body>
</html>
Output
Supported BrowsersRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4