Here’s a basic example of how the <area> tag is used within an HTML document:

<img src="image.jpg" alt="An example image" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,50,50" href="page1.html" alt="Area 1">
<area shape="circle" coords="100,100,50" href="page2.html" alt="Area 2">
</map>

In this example, an image is displayed, and two clickable areas are defined using the <area> tag within a <map>. The attributes of the <area> tag, such as shape, coords, and href, determine the shape, size, and destination of each clickable area.

Attributes of the <area> Tag:
The <area> tag has several attributes that allow you to define the characteristics of the clickable area. Here are the key attributes:

1. shape: Specifies the shape of the clickable area. It can be one of the following values: rect (rectangle), circle (circle), poly (polygon), or default (the entire area not covered by other defined regions).
2. coords: This attribute defines the coordinates of the clickable area. The format of the coordinates varies depending on the shape. For example, for a rectangle, you would provide the top-left and bottom-right coordinates as “x1, y1, x2, y2.”
3. href: Indicates the URL or destination when the area is clicked. This can be an external link, an internal page, or even an email address.
4. alt: Specifies alternative text for the area, which can be displayed when the image is not available or when the user hovers over the area.