Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make image maps in HTML5 ?

  • Last Updated : 26 Sep, 2021

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.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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
Recommended Articles
Page :

Start Your Coding Journey Now!