HTML Tags

HTML <map> Tag

Written by Swapnil RajaUpdated 28 Aug 2026

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 the usemap attribute.
The <area> tags define the clickable shapes: rect, circle, or poly.
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.

PreviousHTML <canvas> Tag NextHTML <area> Tag