HTML

HTMLAreaElement

HTMLAreaElement <area>

The HTMLAreaElement interface offers unique attributes and methods for modifying the layout and presentation of area> elements, in addition to the ordinary object HTMLElement interface's features and methods that are also made available to it by inheritance. An area on an image map is defined with the <area> tag (an image map is an image with clickable areas).In a <map> tag, <area> components are always nested.
Note: The relationship between the image and the map is established by the usemap attribute in the <img> element, which is connected to the name attribute of the <map> element.

Attribute Value Description Example
alt text Specifies an alternate text for the area. Required if the href attribute is present <map name="planetmap"><area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"></map>
coords coordinates Specifies the coordinates of the area <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> </map>
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="info_about_the_sun.htm" download="sun"> </map>
href URL Specifies the hyperlink target for the area <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> </map>
hreflang language_code Specifies the language of the target URL <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" hreflang="en"> </map>
media media_query Specifies what media/device the target URL is optimized for <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" media="screen and (min-color-index:256)"> </map>
referrerpolicy no-referrer No referrer information is sent <a href="https://www.google.com" referrerpolicy="origin"></a> <map name="planetmap" > <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" referrerpolicy="same-origin" > <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" referrerpolicy="same-origin" > <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" referrerpolicy="same-origin" > </map >
no-referrer-when-downgrade Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok)
origin Sends the origin (scheme, host, and port) of the document
origin-when-cross-origin Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request
same-origin Sends a referrer for same-origin request. Sends no referrer for cross-origin request
strict-origin-when-cross-origin Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP)
unsafe-url Sends the origin, path, and query string (regardless of security). Use this value carefully!
rel alternate Links to an alternate version of the document (i.e. print page, translated or mirror) <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" rel="alternate"> </map>
author Links to the author of the document
bookmark Permanent URL used for bookmarking
help Provides a link to a help document
license Provides a link to licensing information for the document
next The next document in a selection
nofollow Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
noreferrer Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink
prefetch Specifies that the target document should be cached
prev The previous document in a selection
search Links to a search tool for the document
tag A tag (keyword) for the current document
shape default Specifies the entire region <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
rect Defines a rectangular region
circle Defines a circular region
poly Defines a polygonal region
target _blank Opens the linked document in a new window or tab <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" target="_blank"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in the named iframe
type media_type Specifies the media type of the linked document. <a href="https://www.google.com" type="text/html">Google</a>

Browser Compatibility

Element Chrome Edge Firefox Safari Opera
<area> Yes Yes Yes Yes Yes