HTML Tags
HTML <map> Tag
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
html
<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
html
<!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="https://ik.imagekit.io/html5andcss3/lesson-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>Browser Support
Chrome | Edge | Firefox | 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.