HTML area Tag

The <area> tag in HTML is used in conjunction with the <map> tag to define clickable areas within an image map. An image map is an image with multiple clickable regions that can link to different URLs or perform various actions when clicked.

The basic syntax of the <area> tag is as follows:

<map name="map-name">
     <area shape="shape-type" coords="coordinates" href="url" alt="alternate-text">
</map>

Let’s break down the attributes used in the <area> tag:

• shape: This attribute specifies the shape of the clickable area. It can be one of the following values: “rect” (rectangle), “circle” (circle), or “poly” (polygon).
• coords: This attribute defines the coordinates of the shape. The format of the coordinates depends on the shape type. For rectangles, the format is “x1,y1,x2,y2” (top left and bottom right coordinates). For circles, it is “x,y,r” (center coordinates and radius). For polygons, it is “x1,y1,x2,y2,x3,y3,…” (list of coordinates).
• href: This attribute specifies the URL that the clickable area should link to when clicked.
• alt: This attribute provides alternate text for the clickable area. It is displayed when the image cannot be loaded or when a user hovers over the area.

Here’s an example of how you can use the <area> tag within an <img> tag and <map> tag to create an image map:

<img src="image.jpg" usemap="#map-name" alt="Image with clickable areas">
<map name="map-name">
     <area shape="rect" coords="0,0,100,100" href="page1.html" alt="Clickable Area 1">
     <area shape="circle" coords="150,150,50" href="page2.html" alt="Clickable Area 2">
     <area shape="poly" coords="200,200,250,300,300,250" href="page3.html" alt="Clickable Area 3">
</map>

In this example, the <img> tag displays the image with the src attribute pointing to “image.jpg”. The <map> tag with the name attribute “map-name” defines the map container. The <area> tags specify different clickable areas within the image using different shapes, coordinates, URLs, and alternate text.

When a user clicks on any of the defined areas, they will be redirected to the corresponding URL specified in the href attribute.

Please note that the usage of image maps and the <area> tag has declined in modern web development due to accessibility concerns and the availability of more flexible alternatives using CSS and JavaScript.