HTML tags | map-area
Tags: html, tags, map, area
Published: 2021-10-08 06:34:07

They are used to **define an image map with clickable areas**. `<map>` defines the map associating it to an image and `<area>` defines each of the clickable areas within the image.

`<map>` has a single `name` attribute, which is used to **give it a name that can be referenced in the corresponding image** through the `usemap` attribute and the `#` character. The `name` attribute is mandatory, it must have a value other than empty and without spaces, and it cannot be repeated in other `<map>` of the same document. If the `id` attribute also exists, both must be the same.

`<area>` can only be used within `<map>` and has several attributes:
* `alt`: is a text string that will be visible if the browser is not able to display the image, and that must be descriptive enough so that it can be understood in that case. It is only required if the `href` attribute is defined.
* `coords`: specifies the coordinates of the shape attribute defining the size, shape and location of the `<area>` element. Their values ​​are specified in pixels.
  * If `shape` is `rect`, the value of `coords` is `x1,y1,x2,y2`, defining the coordinates of the top-left and bottom-right corners of the rectangle (Ex: `<area shape="rect" coords="0,0,253,27" href="#" alt="Mozilla">`).
  * If `shape` is `circle`, the value of `coords` is `x,y,radius`, defining the coordinates of the center of the circle and its radius (Ex: `<area shape="circle" coords="130,136,60" href="#" alt="Mozilla">`).
  * If `shape` is `poly`, the value of `coords` is `x1,y1,x2,y2,..,xn,yn`, defining each of the coordinates of the points that make up the polygon of the area. If the first and last coordinates are not the same, the browser will automatically add the last coordinate to close the polygon.
  * If `shape` is `default` it defines the entire region.
* `download`: if present, indicates that the link is used to download a resource.
* `href`: specifies the URL of the area hyperlink. If it is not present, the area will not act as a link.
* `hreflang`: indicates the language of the link destination. Its value will be a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) code. Only used if the `href` attribute is present.
* `ping`: contains a list of URLs separated by spaces to which, when the link is activated, the browser sends in the background `POST` requests with the body `PING`. It is often used for tracking.
* `referrerpolicy`: a string indicating which referrer to use when the resource is retrieved:
  * `no-referrer` means that the `Referer:` header will not be sent.
  * `no-referrer-when-downgrade` means that the `Referer:` header will not be sent when navigating to a non-TLS (HTTPS) origin. It is the default value if no other policy is specified.
  * `origin` means that the referrer will be the origin of the page, that is, the schema, the host and the port.
  * `origin-when-cross-origin` means that navigation to other origins will be limited to schema, host and port. while navigations to the same origin will include the referrer's route.
  * `unsafe-url` means that the referrer will include the origin and path (but not the fragment, username or password). This case is not secure because it can filter TLS-protected sources and resource paths to insecure sources.
* `rel`: specifies the relationship of the target object to the binding object. The value is a space separated list of [link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) values. If not specified, the relationship between the two will be null. Only used if the `href` attribute is present.
* `shape`: specifies the shape of the area. It can have the values ​​`rect` (to define a rectangle), `circle` (to define a circle), `poly` (to define a polygon) or `default` (to define the entire image). Many browsers support the `rectangle`, `circ` and `polygon` values ​​even though they are not standard.
* `target`: defines how the linked resource will be displayed. Only used if the `href` attribute is present. It can have the following values:
  * `_self`: shows the resource in the same navigation context. It is the default value.
  * `_blank`: displays the resource in a new, unnamed navigation context.
  * `_parent`: shows the resource in the navigation context of the parent of the current one if the current page is within a frame. If there is no parent, it acts the same as `_self`.
  * `_top`: shows the resource in the highest navigation context that is an ancestor of the current one. If there is no parent, it acts the same as `_self`.

Specifying the `target="_ blank"` attribute on an `<area>` element implies the same behavior for the `rel` attribute as specifying `rel="noopener"`, that is, there will be no `window.opener`.

<area> has an **implicit ARIA role** `link` as long as the `href` attribute is set.

- Type: *inline* / *none*
- Self-closing: *No* / *No*
- Semantic value: *No* / *No*

[Definition and example `<map>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map) - [Definition and example `<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) | [Support `<map>`](https://caniuse.com/mdn-html_elements_map) - [Support `<area>`](https://caniuse.com/mdn-html_elements_area)