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 thehref
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
isrect
, the value ofcoords
isx1,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
iscircle
, the value ofcoords
isx,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
ispoly
, the value ofcoords
isx1,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
isdefault
it defines the entire region.
- If
-
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 thehref
attribute is present. -
ping
: contains a list of URLs separated by spaces to which, when the link is activated, the browser sends in the backgroundPOST
requests with the bodyPING
. It is often used for tracking. -
referrerpolicy
: a string indicating which referrer to use when the resource is retrieved:-
no-referrer
means that theReferer:
header will not be sent. -
no-referrer-when-downgrade
means that theReferer:
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 thehref
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) ordefault
(to define the entire image). Many browsers support therectangle
,circ
andpolygon
values even though they are not standard. -
target
: defines how the linked resource will be displayed. Only used if thehref
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>
Top comments (0)