HTML area Tag (original) (raw)

Last Updated : 11 Jul, 2025

**This 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.

html `

<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">

**Output:

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

**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	Thehref 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

Image Map with Tag and Event Attributes

In this example The element named interactive-map contains three elements, each defining a clickable region within the image using the shape, cords, href, and onclick attributes to create interactive areas that trigger alerts.

HTML `

<map name="interactive-map">
    <!-- Triangle area with event -->
    <area shape="poly" 
          coords="59,31,28,83,91,83" 
          href="#" 
          alt="Triangle" 
          onclick="showShapeAlert('Triangle')">

    <!-- Circle area with event -->
    <area shape="circle" 
          coords="155,56,26" 
          href="#" 
          alt="Circle" 
          onclick="showShapeAlert('Circle')">

    <!-- Square area with event -->
    <area shape="rect" 
          coords="224,30,276,82" 
          href="#" 
          alt="Square" 
          onclick="showShapeAlert('Square')">
</map>