View video tutorial

HTML <area> Tag

HTML

The <area> tag defines an area inside an image map.

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

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>
Try it Now »

Click on the "Try it Now" button to see how it works.