HTML <area>
Tag
The <area>
tags are used to map a part of an image so that it is clickable by the end user.
The <area>
elements are always nested within a <map>
tag.
The usemap
attribute in <img>
element is associated with the name
attribute of the <map>
element.
Element Attributes
Attribute | Value | Description |
---|---|---|
alt |
text | Specifies an alternative text for the area. |
coords |
coordinates | This specifies the coordinates of the area. |
download |
filename | Indicates that the author wants to use hyperlinks to download a resource. |
href |
url | Specifies the hyperlink target for the area. |
hreflang |
language_code | Indicates the language of the linked resource. |
media |
media query | Specifies the media / device on which the target URL has been optimized. |
referrerpolicy |
no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
A string that indicates which referrer to use when fetching resources. |
rel |
alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
It specifies the relationship of the target object to the link object. |
shape |
default rect circle ploy |
It specifies the shape of the area. |
target |
_blank _parent _self _top filename |
Specifies the type of button. |
type |
media_type | Specifies the media type of the target URL. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<map name="image-map">
<area target="_blank" alt="Laptop" title="Laptop" href="#" coords="180,0,394,161" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="#" coords="69,8,63,10,59,14,56,21,53,
26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,
122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6" shape="poly">
<area target="_blank" alt="Note" title="Note" href="#" coords="3,111,138,85,170,247,30,276" shape="poly">
</map>
Click on the "Try it Now" button to see how it works.