HTML - <area> Tag

Advertisements

Previous Page
Next Page  

Description

The HTML <area> tag is used for defining an area in an image map.

Example

Live Demo 
<!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>

This will produce the following result −

Global Attributes

This tag supports all the global attributes described in HTML Attribute Reference

Specific Attributes

The HTML <area> tag also supports the following additional 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.
downloadhtml-5 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 html-5 language_code Specifies the language of the target URL.
media html-5 media query Specifies media/device the target URL is optimized for.
nohref true/false Excludes an area from the image map
rel html-5 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 html-5 mime_type Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.

Event Attributes

This tag supports all the event attributes described in HTML Events Reference

Browser Support

Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes
html_tags_reference.htm
Advertisements