How to create a client-side image-map in HTML5 ?

Last Updated : 20 Oct, 2020

In this article, we will create a client-side image map by using an <img> tag. The <img> tag is used to add images on a webpage. This tag is an empty tag which means it can contain only a list of attributes and it has no closing tag.

Syntax:

<img src="url" alt="some_text" usemap="#mapname">

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Define a client-side 
        image-map 
    </title> 
</head> 
  
<body> 
    <h2> 
        HTML5: How to define a 
        client-side image-map? 
    </h2> 
  
    <h4> 
        Inserted image 
        using <img> tag: 
    </h4> 
    <img src= 
"https://www.geeksforgeeks.org/wp-content/uploads/gfgLogo.png"
    alt="GeeksforGeeks logo"> 
</body> 
  
</html> 