RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-area-tag/ below:

HTML area Tag - GeeksforGeeks

HTML area Tag

Last Updated : 11 Jul, 2025

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.

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>

Output:

Note: The <area> tag also supports the Global Attributes and Event Attributes in HTML and This <area> tag is always nested in <map> 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 <area> Tag and Event Attributes

In this example The <map> element named interactive-map contains three <area> 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


 <!DOCTYPE html>
<html>

<head>
    <script>
        function showShapeAlert(shape) {
            alert('You clicked on the ' + shape + ' area.');
        }
    </script>
</head>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" 
         alt="Shapes" 
         width="300"
         height="119" 
         usemap="#interactive-map" />

    <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>
</body>

</html>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4