files/en-us/web/html/reference/elements/area/index.md
The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with {{Glossary("Hyperlink", "hypertext links")}}.
This element is used only within a {{HTMLElement("map")}} element.
{{InteractiveExample("HTML Demo: <area>", "tabbed-taller")}}
<map name="infographic">
<area
shape="poly"
coords="129,0,260,95,129,138"
href="https://developer.mozilla.org/docs/Web/HTTP"
alt="HTTP" />
<area
shape="poly"
coords="260,96,209,249,130,138"
href="https://developer.mozilla.org/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="209,249,49,249,130,139"
href="https://developer.mozilla.org/docs/Web/JavaScript"
alt="JavaScript" />
<area
shape="poly"
coords="48,249,0,96,129,138"
href="https://developer.mozilla.org/docs/Web/API"
alt="Web APIs" />
<area
shape="poly"
coords="0,95,128,0,128,137"
href="https://developer.mozilla.org/docs/Web/CSS"
alt="CSS" />
</map>
img {
display: block;
margin: 0 auto;
width: 260px;
height: 260px;
}
This element's attributes include the global attributes.
alt
href attribute is used.coords
: The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>.
This attribute must not be used if shape is set to default.
rect: the value is x1,y1,x2,y2.
The value specifies the coordinates of the top-left and bottom-right corner of the rectangle.
For example, in <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> the coordinates are 0,0 and 253,27, indicating the top-left and bottom-right corners of the rectangle, respectively.circle: the value is x,y,radius. Value specifies the coordinates of the circle center and the radius.
For example: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">poly: the value is x1,y1,x2,y2,..,xn,yn. Value specifies the coordinates of the edges of the polygon.
If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygonThe values are numbers of CSS pixels. Our shape generator can help you generate the coords syntax by selecting points on an image you upload.
download
download attribute.href
<area> element does not represent a hyperlink.interestfor {{experimental_inline}} {{non-standard_inline}}
<area> element as an interest invoker. Its value is the id of the target element, which will be affected in some way (normally shown or hidden) when interest is shown or lost on the invoker element (for example, by hovering/unhovering or focusing/blurring it). See Using interest invokers for more details and examples.ping
PING will be sent by the browser (in the background).
Typically used for tracking.referrerpolicy
no-referrer: The {{HTTPHeader("Referer")}} header will not be sent.no-referrer-when-downgrade: The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).origin: The sent referrer will be limited to the origin of the referring page: its scheme, {{Glossary("host")}}, and {{Glossary("port")}}.origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.same-origin: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username).
This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.href attribute, this attribute specifies the relationship of the target object to the link object.
The value is a space-separated list of link types.
The values and their semantics will be registered by some authority that might have meaning to the document author.
The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.shape
rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes.target
: A keyword or author-defined name of the {{Glossary("browsing context")}} to display the linked resource. The following keywords have special meanings:
_self (default): Show the resource in the current browsing context._blank: Show the resource in a new, unnamed browsing context._parent: Show the resource in the parent browsing context of the current one, if the current page is inside a frame.
If there is no parent, acts the same as _self._top: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent).
If there is no parent, acts the same as _self.Use this attribute only if the href attribute is present.
[!NOTE] Setting
target="_blank"on<area>elements implicitly provides the samerelbehavior as settingrel="noopener"which does not setwindow.opener. See browser compatibility for support status.
<map name="primary">
<area
shape="circle"
coords="75,75,75"
href="left.html"
alt="Click to go Left" />
<area
shape="circle"
coords="275,75,75"
href="right.html"
alt="Click to go Right" />
</map>
{{ EmbedLiveSample('Image with clickable areas', 360, 160) }}
{{Specifications}}
{{Compat}}