HTML <area> Tag Tutorial

The <area> tag is used in conjunction with the <map> tag to define clickable areas in an image map. Each <area> element defines a clickable area within an image, such as a circle, rectangle, or polygon. When a user clicks on the defined area, they are directed to the specified URL.

Usage

To use the <area> tag, you must first define an image map with the <map> tag. Within the <map> tag, you can then define multiple <area> elements to create clickable regions on the image.

Example

Below is an example of how to use the <area> tag:

<img src="example.jpg" usemap="#examplemap" />
<map name="examplemap">
    <area shape="rect" coords="0,0,50,50" href="page1.html" />
    <area shape="circle" coords="100,100,50" href="page2.html" />
    <area shape="poly" coords="200,200,250,250,200,300" href="page3.html" />
</map>

Attributes

Attribute	Description
shape	Specifies the shape of the clickable area. Can be "rect" for rectangle, "circle" for circle, or "poly" for polygon.
coords	Specifies the coordinates of the clickable area. The format varies depending on the shape (e.g. for a rectangle: "left,top,right,bottom", for a circle: "centerX,centerY,radius", for a polygon: "x1,y1,x2,y2,...").
href	Specifies the URL that the user is directed to when clicking on the area.
alt	Specifies alternate text for the area, to be displayed if the image cannot be loaded or viewed by screen readers.

Overall, the <area> tag is a valuable tool for creating interactive image maps on the web. By defining clickable areas within an image, you can provide users with a more engaging and intuitive browsing experience.