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>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
coordsvalues depend on the definedshape: rect: x1, y1, x2, y2circle: x, y, radiuspoly: multiple x,y pairs forming a polygon- You can use multiple
<area>tags for different parts of the same image. - Always include
alttext 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.