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>

Output

Browser Output

html

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	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