HTML tags | map-area

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 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 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.

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> - Definition and example <area> | Support <map> - Support <area>