Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to create an area inside an image-map using HTML5 ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The approach of this article is to create an area inside an image-map by using a <area> tag in a HTML Document. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag. It has no closing tag and hence it is an empty tag for HTML but incase of XHTML you need to close that properly. HTML5 has some new attributes.


<area> Contents </area> 



<!DOCTYPE html>
<body style="text-align: center">
    <h2 style="color: green;">
        How to create an area inside
        an image-map using HTML5?
    <img src=
        alt="" width="300" height="119"
        class="aligncenter size-medium
        wp-image-910965" usemap="#shapemap" />
    <map name="shapemap">
        <!-- Area tag contained image. -->
        <area shape="poly"
            coords="59, 31, 28, 83, 91, 83"
        <area shape="circle"
            coords="155, 56, 26"
        <area shape="rect"
            coords="224, 30, 276, 82"


Before click on specific clickable area:

After click on specific clickable area: 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Last Updated : 08 Jun, 2021
Like Article
Save Article
Similar Reads
Related Tutorials