HTML <area> Tag


The area tag in HTML is used to set an area in image map.

Following are the attributes−

Attribute
Value
Description
alt
text
Specifies an alternate text for the area.
coords
if shape = "rect" then coords = "left, top, right, bottom"

if shape = "circ" then coords = "centerx, centery, radius"

if shape = "poly" then coords = "x1, y1, x2, y2,..,xn, yn"
Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps.
download
filename
Specifies that the target gets downloaded when hyperlink is clicked by user.
href
URL
Specifies the URL of a page or the name of the anchor that the link goes to.
hreflang
language_code
Specifies the language of the target URL.
media
media query
Specifies media/device the target URL is optimized for.
nohref
true/false
Excludes an area from the image map
rel
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Specifies relationship between the current document and the target URL
shape
rect
rectangle
circ
circle
poly
polygon
Specifies the shape of the image map
target
_blank
_parent
_self
_top
Where to open the target URL.
_blank − the target URL will open in a new window
_self − the target URL will open in the same frame as it was clicked
_parent − the target URL will open in the parent frameset
_top − the target URL will open in the full body of the window
type
mime_type
Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.

Let us now see an example to implement the <area> tag:

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<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>

Output

raja
Published on 19-Jun-2019 14:35:07
Advertisements