HTML <map> Tag

Html Tag map is the topic of today’s post. With reasonable faith, it will satisfy the educational demands.

The HTML <map> tag is used to define a client-side image map, which allows you to define clickable areas on an image. When a user clicks on a specific area of the image map, they are redirected to a specific URL or perform an action, such as displaying a tooltip or opening a modal.

Here’s how you can create clickable areas in an image map:


<!DOCTYPE html> <html> <body> <img src="" width="480" height="400" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="circle" coords="427,64,17" href="/mars.htm" alt="Mars"> <area shape="circle" coords="276,156,32" href="/earth.htm" alt="Earth"> <area shape="polygon" coords="1,102,28,111,87,156,122,193,152,239,161,255,181,307,191,350,200,391,3,391,3,387,3,387,-3,383,-2,384,3,386,3,386,3,386,3,386,3,386" href="/sun.htm" alt="Sun"> </map> </body> </html>

Another image map, with clickable areas:


<!DOCTYPE html> <html> <body> <img src="" alt="Workplace" usemap="#workmap" width="400" height="379"><map name="workmap"> <area shape="rect" coords="25,10,210,340" alt="Laptop" href="/laptop.htm"> <area shape="rect" coords="225,187,333,341" alt="Tablet" href="/tablet.htm"><area shape="rect" coords="345,244,395,335" alt="iphone" href="/iphone.htm"> </map> </body> </html>

Here is another example of the <map> tag with external linking through it:


<!DOCTYPE html> <html> <body> <img src="" usemap="#us-map"> <map name="us-map"> <area shape="rect" coords="0,0,100,100" href="" alt="California"> <area shape="rect" coords="100,0,200,100" href="" alt="Texas"> <area shape="rect" coords="200,0,300,100" href="" alt="Florida"> </map> </body> </html>

Tag map Usage

The Tag map <map> specifies an image map. A clickable image map is an image with areas that can click.

The requisite name attribute of the <map> element is linked with the <img>‘s usemap attribute to establish a connection between the image and map.

Tip : The map element consists of several area elements, which indicate the clickable areas in the image map.

Here are some common uses for the <map> tag:

  • You can use an image map to provide a visual navigation system for users. For example, if you have a map of a city, you can create clickable areas for each major location or attraction to provide quick access to more information.
  • Image maps can be used on e-commerce sites to provide clickable areas on product images, allowing users to quickly access product information, reviews, or purchasing options.
  • You can use image maps to create interactive infographics, allowing users to click on specific sections of the image to learn more about a topic.
  • Image maps can be used to create simple games, where users click on different parts of an image to complete a challenge or solve a puzzle.
  • Image maps can be used to provide step-by-step instructions on a diagram or image. For example, you could create an image map for a car engine diagram, with clickable areas for each component and a pop-up window displaying information about each part.

Browser Compatibility


Attributes List

namemapnameA must. An image map’s name is assigned.



Global Attributes can also be accepted in HTML with the Tag <map>.


Event Attributes can also be specified in HTML with the Tag <map>.

CSS Default Settings

By default, many browsers will render the following <map> element values:

map {
display: inline;

Advantages of HTML <map> Tag

The HTML <map> tag offers several advantages when used in a web page:

  • The <map> tag allows you to create interactive images that can be used for navigation or to provide additional information. This can make your web page more engaging and user-friendly.
  • By providing clickable areas on an image, users can easily navigate to specific pages or perform specific actions without having to search for links on the page.
  • The <map> tag can help improve accessibility by providing alternative text for each clickable area, which can be read by screen readers for users with visual impairments.
  • An image map can save time by allowing users to quickly access the information they need without having to navigate through multiple pages.
  • The <map> tag can be used with different image formats and can be used for a variety of purposes, such as highlighting features on a map, displaying product information on an e-commerce site, or providing instructions on a diagram.
Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

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