What is the area element in HTML?

The <area> element in HTML is used to define the area inside an image map. An image map consists of a map inside the image where the user can click and be directed to a different link on the web or different part of the same website using the href attribute. An image map is created in HTML using the <map> element. The <area> element is always used as a child element of <map>.

Attributes

The <area> element contains the following attributes:

• href: Contains the target URL when the user clicks on an area inside the image map. The rel, referrer, and hreflang attributes associated with href can therefore be used as well.

• alt: Alternative text to display if the browser cannot render the image.

• shape: Defines the geometrical shape of the area that is clickable. Can be rect, which defines a rectangular region, poly, which defines a polygon, circle, which defines a circular region, or default, which uses the whole image as the area.

• coords: Coordinates of the edges or properties of the shape as defined in the shape attribute. For example, the coords for rect shape correspond to x1,y1,x2,y2.

• download: The hyperlink attached in href that can be used for downloading purposes.

• ping: Contains a list of URLs separated by spaces. When a hyperlink is opened, it sends a POST HTTP request in the background. ping is used for tracking purposes.

• target: User-defined name or default of the browsing context upon which the URL in href should be displayed.

Example

Explanation

In the above HTML code, we define an image map inside the Educative_Logo.jpg using the <map> element. We define a rectangular area inside the image map using the <area> element with the shape attribute as rect, and the rectangular area encapsulates the logo part of the image. Clicking on the logo will redirect the user to the Educative homepage.