What Is The <map> Tag In HTML?

What is the <map> Tag in HTML?

By /

The <map> tag in HTML is used to create image maps. This means you can make different parts of a single image clickable, and each part can link to a different destination.

Instead of using multiple images or buttons, you can use one image and define clickable areas inside it. This makes your design cleaner and more interactive.

This guide explains everything in simple terms so you can understand and use the <map> tag easily.

What is the <map> Tag?

The <map> tag is used together with an <img> tag to define clickable areas on an image.

Each clickable area is created using the <area> tag inside the <map>.

Simple meaning:

The <map> tag = turns an image into multiple clickable sections

How It Works

Here is the basic idea:

  1. You display an image using <img>
  2. You connect it to a <map> using the usemap attribute
  3. Inside <map>, you define clickable areas with <area>

Basic Syntax

<img src="image.jpg" usemap="#examplemap" alt="Example Image">

<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Section 1">
  <area shape="circle" coords="337,300,44" href="page2.html" alt="Section 2">
</map>

Breaking It Down

1. <img> with usemap

<img src="image.jpg" usemap="#examplemap">
  • usemap connects the image to the map
  • The value must match the name in <map>

2. <map> Tag

<map name=”examplemap”>
</map>

  • Holds all clickable areas
  • Must have a name attribute

3. <area> Tag

Defines each clickable region.

<area shape="rect" coords="34,44,270,350" href="page1.html">

Shapes You Can Use

The <area> tag supports different shapes.

1. Rectangle (rect)

<area shape="rect" coords="x1,y1,x2,y2">
  • Defines a rectangle
  • Uses top-left and bottom-right coordinates

2. Circle (circle)

<area shape="circle" coords="x,y,radius">
  • Defines a circle
  • Center point + radius

3. Polygon (poly)

<area shape="poly" coords="x1,y1,x2,y2,x3,y3">
  • Defines custom shapes
  • You can create complex clickable areas

Example with Multiple Areas

<img src="menu.jpg" usemap="#menuMap" alt="Menu">

<map name="menuMap">
  <area shape="rect" coords="0,0,100,100" href="home.html" alt="Home">
  <area shape="rect" coords="100,0,200,100" href="about.html" alt="About">
  <area shape="rect" coords="200,0,300,100" href="contact.html" alt="Contact">
</map>

Coordinates Explained Simply

Coordinates tell the browser where the clickable area is located on the image.

They are based on pixels.

Example:

coords="0,0,100,100"
  • Start at top-left (0,0)
  • End at (100,100)

How to Find Coordinates

You can:

  • Use design tools like Photoshop or Figma
  • Use browser extensions
  • Inspect image positions manually

Real-Life Use Cases

1. Navigation Images

Clickable sections on a banner.

2. Product Display

Different parts of a product image linking to details.

3. Interactive Maps

Click regions on a country or city map.

4. Infographics

Clickable data points.

Accessibility Tips

  • Always include alt text in <area>
  • Make clickable areas large enough
  • Avoid too many tiny clickable spots

Example:

<area shape="rect" coords="0,0,100,100" href="#" alt="Go to homepage">

Common Mistakes to Avoid

1. Missing usemap

❌ Wrong:

<img src="image.jpg">

✔ Correct:

<img src="image.jpg" usemap="#mapname">

2. Wrong Map Name

Make sure usemap="#name" matches <map name="name">

3. Incorrect Coordinates

Wrong values will make areas not clickable.

4. Forgetting alt Text

This affects accessibility and SEO.

Styling Limitations

The <map> and <area> tags do not support CSS styling directly.

You cannot:

  • Change colors of clickable areas
  • Add hover effects easily

Alternative to <map>

Modern developers sometimes use:

  • CSS positioning
  • JavaScript overlays

But <map> is still useful for simple cases.

Advanced Example

<!DOCTYPE html>
<html>
<head>
  <title>Map Tag Example</title>
</head>
<body>

<h2>Clickable Image Map</h2>

<img src="layout.jpg" usemap="#layoutMap" alt="Website Layout">

<map name="layoutMap">
  <area shape="rect" coords="0,0,200,100" href="header.html" alt="Header">
  <area shape="rect" coords="0,100,200,300" href="content.html" alt="Content">
  <area shape="rect" coords="0,300,200,400" href="footer.html" alt="Footer">
</map>

</body>
</html>

When Should You Use <map>?

Use it when:

✔ You want multiple clickable areas in one image
✔ You want simple interactivity
✔ You are working with static layouts

Avoid it when:

✘ You need animations or effects
✘ You want full design control
✘ You are building complex UI

Browser Support

The <map> tag works in all browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge

Best Practices

  • Use clear and simple shapes
  • Keep coordinates accurate
  • Always add alt text
  • Test on different screen sizes
  • Keep it simple

Why the <map> Tag Matters

Even though it’s not used as often today, it still provides:

  • Simple interactivity
  • Lightweight solution
  • No need for JavaScript

<map> vs Modern Methods

Feature<map>Modern CSS/JS
Easy to use✔✘
Flexible design✘✔
Interactive effects✘✔

The <map> tag is a simple way to make images interactive by adding multiple clickable areas. It works together with <img> and <area> to create image maps.

While modern techniques offer more flexibility, the <map> tag is still useful for basic interactive designs and quick implementations.

By understanding how it works, you can add more functionality to your images without needing complex code.

Read More

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top