HTML Tags

HTML <area> Tag

The <area> tag defines clickable areas within an image map created by the <map> element.
Each <area> represents a region of the image that acts as a hyperlink to another page, section, or resource.

Syntax

html

<area shape="shapeType" coords="coordinates" href="URL" alt="description">

Attributes

Attribute	Description
shape	Defines the shape of the clickable area - can be rect, circle, or poly.
coords	Specifies the coordinates of the clickable area (varies based on shape).
href	The URL or link the area points to when clicked.
alt	Alternate text describing the clickable area (for accessibility).
target	Specifies where to open the linked document (_blank, _self, etc.).
download	Allows the linked file to be downloaded instead of opened.
rel	Defines the relationship between the current document and the linked one.
title	Provides additional information (shows as a tooltip on hover).

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Map Tag Example</title>
</head>
<body>

  <h2>Clickable Image Area</h2>
  <img src="https://ik.imagekit.io/html5andcss3/lesson-samples/html_map.jpg" 
       alt="World Map" 
       usemap="#worldmap">

  <map name="worldmap">
    <area shape="rect" coords="46,13,170,230" href="https://en.wikipedia.org/wiki/Rectangle" alt="Rectangle">
    <area shape="rect" coords="215,38,370,200" href="https://en.wikipedia.org/wiki/Square" alt="Square">
    <area shape="circle" coords="107,345,76" href="https://en.wikipedia.org/wiki/Circle" alt="Circle">
    <area shape="poly" coords="295,250,372,295,372,383,295,432,218,385,215,295" href="https://en.wikipedia.org/wiki/Hexagon" alt="Poly">
  </map>

</body>
</html>

Output

Browser Output

html

Displays an image of a world map with three clickable zones — rectangle, circle, and polygon.
Each zone links to a Wikipedia page about a continent.
Use our TryIt Editor to see the output.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

The <area> element is fully supported by all modern browsers including Internet Explorer 9+.

Notes

The <area> tag must be nested inside a <map> element.
The coords values depend on the defined shape:
rect: x1, y1, x2, y2
circle: x, y, radius
poly: multiple x,y pairs forming a polygon
You can use multiple <area> tags for different parts of the same image.
Always include alt text for accessibility and SEO.
Use percentage coordinates or JavaScript for responsive image maps.

Conclusion

The <area> tag makes sections of an image clickable, creating interactive and engaging content.
It’s an essential companion to <map> and is supported across all major browsers, making it reliable for web navigation and visual interfaces.

PreviousHTML <map> Tag NextHTML <table> Tag