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

Last Updated : 08 Jun, 2021

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.

Syntax:

<area> Contents </area>

Example:

html

<!DOCTYPE html>
<html>
 
<body style="text-align: center">
    <h2 style="color: green;">
        GeeksForGeeks
    </h2>
    <h2>
        How to create an area inside
        an image-map using HTML5?
    </h2>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
        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"
            href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
            alt="Triangle">
 
        <area shape="circle"
            coords="155, 56, 26"
            href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
            alt="Circle">
 
        <area shape="rect"
            coords="224, 30, 276, 82"
            href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
            alt="Square">
    </map>
</body>
 
</html>