HTML <map> Tag

What You’ll Learn

By the end of this tutorial, you’ll create image maps with <map>, link them to images via usemap, and define clickable hotspots with <area>.

What Is the <map> Tag?

The map element (<map>) defines an image map — a set of clickable hotspots on an image. It works together with the <img> usemap attribute and one or more <area> children that specify each region’s shape, coordinates, and link.

Image maps are useful for navigation diagrams, interactive infographics, and floor plans where different regions of a single image link to different pages.

📝 Syntax

Link an image to a map with usemap, then define hotspots inside <map>:

<img src="diagram.png" alt="Site diagram" usemap="#site-map">
<map name="site-map">
  <area shape="rect" coords="0,0,100,100" href="/home" alt="Home">
  <area shape="circle" coords="200,200,50" href="/about" alt="About">
</map>

Syntax Rules

• usemap on img must start with # followed by the map name or id.
• <map> requires a name attribute (or id in HTML5).
• Each hotspot is an <area> void element inside <map>.
• Place <map> anywhere in the document — it does not wrap the image.

⚖️ <map> vs <area>

See the HTML <area> tag tutorial for detailed hotspot attribute reference.

⚖️ HTML Image Map vs SVG Hotspots

Examples Gallery

Single hotspot, multi-region navigation, and circle-shaped areas on image maps.

Live Preview

Click a region on this interactive image map:

Click the HTML or CSS region on the image.

Basic Image Map

One map with a single rectangular area linked to an image.

basic-map.html

Copy

<img src="logo.png" alt="Logo" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="0,0,128,128" href="/home" alt="Home">
</map>

Try It Yourself

📚 Common Use Cases

Use <map> for site navigation diagrams, interactive infographics, product selector images, floor plans, anatomical charts, and any raster image where different regions link to different pages.

Image Navigation

Multiple area elements inside one map for multi-page navigation.

navigation-map.html

Copy

<img src="site-map.jpg" alt="Site map" usemap="#site-map">
<map name="site-map">
  <area shape="rect" coords="50,50,150,150" href="home.html" alt="Home">
  <area shape="rect" coords="200,50,300,150" href="about.html" alt="About">
</map>

View Output Try It Yourself

📤 Output:

Click the HTML or CSS region.

Circle Hotspot

Use shape="circle" with coords="x,y,radius" for round clickable regions.

circle-map.html

Copy

<map name="product-map">
  <area shape="circle" coords="100,100,50" href="product.html" alt="Select product">
</map>

Try It Yourself

♿ Accessibility

Image maps require extra care for inclusive design:

• alt on img — Describe the overall image for users who cannot see it.
• alt on every area — Each hotspot needs descriptive alt text explaining where the link goes.
• Text alternative — Provide a regular list of links below the image for keyboard-only users.
• Meaningful coords — Test hotspots at actual image size so click targets are accurate.

💡 Best Practices