Skip to content
Related Articles
Open in App
Not now

Related Articles

How to make image maps in HTML5 ?

Improve Article
Save Article
  • Last Updated : 26 Sep, 2021
Improve Article
Save Article

The HTML <map> tag is used to define image maps in HTML. The areas inside the image which are clickable are defined by using the <area> tag.


<map name="map-name">

Attribute value:

  • name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have same value as image’s usemap attribute.


Example: In this example, the highlighted area is the mapped area, clicking on it will lead to the website.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">    
    <img src=
        alt="gfgimage" usemap="#mapID">
    <map name="mapID">
        <area shape="rect" 
            coords="34, 44, 270, 350"


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!