HTML <area> Tag

The HTML <area> tag is used to define a clickable area within an image map. Image maps allow you to link different parts of an image to different destinations.

The <area> tag is always nested within a <map> element, which is linked to an image using the usemap attribute.

Example of HTML <area> Tag

A simple example of an image map using the <area> tag is shown below:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Image Map Example</h2>
        <img src="example.jpg" alt="Example Image" usemap="#example-map">

        <map name="example-map">
            <area shape="rect" coords="34,44,270,350" alt="Rectangle" href="https://example.com/rectangle">
            <area shape="circle" coords="150,150,75" alt="Circle" href="https://example.com/circle">
            <area shape="poly" coords="25,25,100,25,100,100,25,100" alt="Polygon" href="https://example.com/polygon">
        </map>
    </body>
</html>

Note: The coords attribute specifies the coordinates of the clickable area. The shape can be a rectangle (rect), circle (circle), or polygon (poly).

Attributes of HTML <area> Tag

The <area> tag supports the following attributes:

  • shape: Defines the shape of the area (rect, circle, poly, or default).
  • coords: Specifies the coordinates of the area depending on the shape.
  • href: URL of the linked resource.
  • alt: Alternate text for the area, used for accessibility.
  • target: Specifies where to open the linked document (_blank, _self, etc.).
  • nohref: Specifies that the area is not clickable (deprecated).

Styling HTML <area> Tag

The <area> tag itself is not directly styled since it is not a visible element. However, the associated <map> and image elements can be styled to enhance the image map’s appearance.

Example with CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                border: 2px solid black;
            }
            area {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <h2>Styled Image Map Example</h2>
        <img src="example.jpg" alt="Styled Example" usemap="#styled-map">

        <map name="styled-map">
            <area shape="rect" coords="50,50,200,200" alt="Styled Rectangle" href="https://example.com/styled-rectangle">
        </map>
    </body>
</html>

Accessibility of HTML <area> Tag

When using the <area> tag, ensure you include meaningful alt attributes to describe the clickable areas for screen readers. This improves the accessibility of your image map.