 Home > Abakada: Back to Basics > Language References > HTML Elements > AREA Element
| Defines a clickable area, or hotspot, within a client-side image <map>. | HTML 2, 3.2, 4, 4.01, 5 |
HTML Syntax
<area
alt = text
coords = coordinates
download = filename
href = url
hreflang = language_code
media = media query
referrerpolicy = no-referrer | no-referrer-when-downgrade | origin | origin-when-cross-origin | same-origin | strict-origin-when-cross-origin | unsafe-url
rel = alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag
shape = circ | circle | poly | polygon | rect | rectangle
target = _blank | _parent | _search | _self | _top | window_name
type = content_type
>
 NOTE: Both start and end tags are required.
A hotspot is an invisible region on a graphic that is assigned a hyperlink. When a site visitor clicks the region, the destination of the hyperlink opens in the browser.
A hotspot can take the shape of a rectangle, circle, or polygon.
The <area> element describes an individual hotspot region in the image map. The element defines the shape, coordinates, and associated URL of one hyperlink region.
area can only be used inside a <map> element. Any number of area elements may be contained within the same map element.
The coords attribute is required. The format of the coords value is dependent upon the value of the shape attribute.
Also, either the href or the nohref attribute must be supplied.
The <area> element supports the following attributes, in addition to global attributes common to all HTML elements.
| alt | text | Specifies an alternate text for the area. Required if the href attribute is present |
| coords | coordinates | Specifies the coordinates of the area |
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the hyperlink target for the area |
| hreflang | language_code | Specifies the language of the target URL |
| media | media query | Specifies what media/device the target URL is optimized for |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url | Specifies which referrer information to send with the link |
| rel | alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag | Specifies the relationship between the current document and the target URL |
| shape | default, rect, circle, poly | Specifies the shape of the area |
| target | _blank, _parent, _self, _top, framename | Specifies where to open the target URL |
| type | media_type | Specifies the media type of the target URL |
The following example provides the full code for an image map of the solar system. Clicking on the sun or any planet opens a link to an individual image.
Sample Code
<img src="imgs/solarsys.gif" width=504 height=126
border=0 alt="Solar System" usemap="#solar">
<map name="solar">
<area shape="rect" coords="0,0,76,122"
href="imgs/sun.gif" alt="Sun">
<area shape="circle" coords="90,61,15"
href="imgs/mercury.gif" alt="Mercury">
<area shape="circle" coords="124,61,18"
href="imgs/venus.gif" alt="Venus">
<area shape="circle" coords="163,61,23"
href="imgs/earth.gif" alt="Earth">
<area shape="circle" coords="201,61,14"
href="imgs/mars.gif" alt="Mars">
<area shape="circle" coords="256,61,40"
href="imgs/jupiter.gif" alt="Jupiter">
<area shape="circle" coords="328,61,35"
href="imgs/saturn.gif" alt="Saturn">
<area shape="circle" coords="392,61,30"
href="imgs/uranus.gif" alt="Uranus">
<area shape="circle" coords="443,61,24"
href="imgs/neptune.gif" alt="Neptune">
<area shape="circle" coords="480,61,13"
href="imgs/pluto.gif" alt="Pluto">
</map>
 Show me
IMG MAP
|