HTML - <area> Tag

The <area> tag specifies the areas of the image-map that can be clicked on or are active areas that are linked to by hyperlinks. It will carry out some action, such as open a new image or URL, if you click on specified regions. The <map> element is always used with this tag. Using multiple <area> elements in a single <map> element, different areas inside an image map can be hyperlinked to different destinations.

The (necessary) attributes shape and coords are used to define the <area> element. The area's shape, such as a polygon, rectangle, circle, or square, is specified by the shape attribute. The coords attribute defines the coordinates of different regions inside the image.

Syntax

Following is the syntax for HTML <area> tag −

<area shape="" coords="" href="">

Specific Attributes

The HTML <area> tag also supports the following additional attributes −

S.No. Attribute & Description
1

alt

Specifies an alternate text for the area.
2

coords

Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps.
3

download

Specifies that the target gets downloaded when hyperlink is clicked by user.
4

href

Specifies the URL of a page or the name of the anchor that the link goes to.
5

hreflang

Specifies the language of the target URL.
6

media

Specifies media/device the target URL is optimized for.
7

nohref

Excludes an area from the image map
8

rel

Specifies relationship between the current document and the target URL
9

shape

Specifies the shape of the image map
10

target

Where to open the target URL.
11

type

Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.

Example

Let’s look at the following example, where we are going to use the shapes poly, rect, and circle to make the area clickable.

<!DOCTYPE html>
<html>
<head>
   <title>HTML area Tag</title>
</head>
<body>
   <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>   
   <map name = "tutorials">
      <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
      
      <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" />
      
      <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
   </map>
</body>
</html>

On running the above code, the output window will pop up, displaying the shapes rect, poly, and circle, along with a text indicating the link that is associated with the shapes that get uploaded on the webpage. When the user finds the clickable area and clicks it directs to the associated link.

html_tags_reference.htm
Advertisements