How to add HTML <area> href Attribute

Use the href attribute to specify the link target for each area in the image map:

Definition and Usage

The href attribute specifies the hyperlink target for the area.

If the href attribute is not present, the <area> tag is not a hyperlink.

Browser Support

Syntax

Attribute Values

Value	Description
URL	Specifies the hyperlink target for the area. Possible values: An absolute URL - points to another web site (like href="http://www.example.com/sun.htm") A relative URL - points to a file within a web site (like href="sun.htm") Link to an element with a specified id within the page (like href="#top") Other protocols (like https://, ftp://, mailto:, file:, etc..) A script (like href="javascript:alert('Hello');")

Value

Description

URL

Specifies the hyperlink target for the area.

Possible values:

An absolute URL - points to another web site (like href="http://www.example.com/sun.htm")
A relative URL - points to a file within a web site (like href="sun.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https://, ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>
<h1>The area href attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/avatar.png">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/avatar.png">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/avatar.png">
</map>
</body>
</html>

Output should be:

Type :	html
Category :	Web Tutorial
Sub Category :	HTML Tag
Uploaded by :	Admin