HTML <area> Tag

Last Updated : 02 Jan, 2024

This <area> tag is used in an HTML document to map a portion of an image to make it clickable by the end user. This specifies the location and size of the active region on an image, which can be clicked. Clicking on areas with href attributes directs to a specified URL or action.

Note: The <area> tag also supports the Global Attributes and Event Attributes in HTML and This <area> tag is always nested in <map> tag.

Syntax:

<area>

Attributes:

Attribute Values	Description
shape	The shape to be mapped on the image can be a “rect”, a “circle” or a “poly”
coords	The coordinates of the shape.
href	The href is the link that the user will be directed to after clicking the mapped portion of the image.
alt	Alternative text for a clickable area in an image map.
download	Download target when the hyperlink is clicked.
target	Context in which to open the link resource.
hreflang	Language of targeted URL.
media	Optimized URL for media or device.
rel	Relationship between URL and document.
type	Media type of URL

Example: In this example, we will use the <area> tag in html.

html

<!DOCTYPE html>
<html>
 
<body>
    <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>