AREA (<area>) Tag

0 3047

The HTML <area> tag is used to describe an area in a specific region. One can easily outline certain sections inside an image map. Generally, it is used to create clickable areas inside an image-map i.e. to generate hyperlinks, so that whenever any user clicks on those areas, it will perform some specifically defined actions such as new URL redirection, open other images, or target another tab, etc.

How it is used

This tag is always used with <map element>.

Usage:

This tag is used when there is a need to have multiple hyperlinks on any image within a page.
The <area> element is defined with (required) attributes i.e. shape and coords.
The shape attribute specifies the shape of the area such as rectangle, circle, square, and polygon.
The coords attribute defines the coordinates of areas inside the image.

Code:

<!DOCTYPE html>
<html>
 <head>
<title> Area tag</title>
  </head>
 <body>
 <h1> Example of  Area tag </h1>
<img src="download.jpg" usemap="#web">
<map name="web">
<area shape="rect" href="https://www.codingtag.com/html" coords="30,50,50,30"
alt="rect hyperlink in one img" title="rect hyperlink">

<area shape="circle" coords="90,18,100" href="https://www.codingtag.com/php-introduction"
alt="circle hyperlink in one img" title="circle hyperlink">
 </map>
 </body>
</html>