The
<map>tag in HTML is used to define an image map, which is a clickable region on an image that links to different destinations.
Each clickable area within the map is defined using the<area>tag.
Syntax
<map name="mapName">
<area shape="shapeType" coords="x1,y1,x2,y2" href="URL" alt="description">
</map>Attributes
| Attribute | Description |
|---|---|
| name | Specifies a unique name for the map, used to reference it in the <img> tag with usemap. |
| id | Standard attribute for unique identification in the DOM. |
| class | Standard attribute for CSS styling. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Tag Example</title>
</head>
<body>
<h2>Clickable Image Area</h2>
<img src="/samples/html_map.jpg"
alt="World Map"
usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="46,13,170,230" href="https://en.wikipedia.org/wiki/Rectangle" alt="Rectangle">
<area shape="rect" coords="215,38,370,200" href="https://en.wikipedia.org/wiki/Square" alt="Square">
<area shape="circle" coords="107,345,76" href="https://en.wikipedia.org/wiki/Circle" alt="Circle">
<area shape="poly" coords="295,250,372,295,372,383,295,432,218,385,215,295" href="https://en.wikipedia.org/wiki/Hexagon" alt="Poly">
</map>
</body>
</html>Output
Browser Output
Displays an image of the world map with clickable regions for Asia, Africa, and Europe.
Clicking the regions navigates to the specified URLs. Use our Try It Editor to test the clickable areas.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browsers, including Internet Explorer 9+, support <map> and <area> tags.
Notes
- The
<map>tag itself does not display anything; it must be linked to an<img>using theusemapattribute. - The
<area>tags define the clickable shapes:rect,circle, orpoly. - Always include alt text for accessibility.
- Coordinates are pixel-based relative to the image’s size; for responsive images, JavaScript may be needed to adjust coordinates dynamically.
- Ideal for interactive images, diagrams, and navigation maps.
Conclusion
The <map> tag allows you to create interactive images with multiple clickable areas.
It works across all modern browsers and IE9+, but proper coordinates and alt text are important for usability and accessibility.
