The <area> tag defines an area or region inside an image.
This element is located inside a <map> (image map) element.
By default, areas are not visible -- they just define a clickable area.
An example area that delineates California in a map of the USA.
<area shape="poly"
coords="103,421,633,423,601,389,575,356,532,322,475,305,103,421"
alt="California"
href="javascript:alert('California was clicked');">
A computer image with 3 clickable <area> tags for screen, keyboard, and mouse.
Click on any of these and an alert box displays the area name.
<img src="/img/html/computer-map.png"
alt="Computer"
usemap="#computermap" />
<map name="computermap">
<area shape="rect" coords="253,142,16,2" alt="Screen"
href="javascript:alert('Screen was clicked');">
<area shape="rect" coords="262,218,0,156" alt="Keyboard"
href="javascript:alert('Keyboard was clicked');">
<area shape="circle" coords="267,234,22" alt="Mouse"
href="javascript:alert('Mouse was clicked');">
</map>
<area> - creates an area inside the image map.This table lists the <area> tag attributes.
| Attribute | Accepted Values | Description |
|---|---|---|
| shape |
default rect circle poly |
Area's shape |
| coords | coordinates | The area's coordinates |
| href | URL | Hyperlink target of the area |
| target |
_blank _self _parent _top framename |
Defines where or how to open the linked page |
| id | value | Provides the area element with a unique identifier. |
| tabindex | index | Sets a tab sequence relative to the other elements. |
| alt | text | Alternative text the area, required if href attribute is present. |
| rel |
nofollow noopener noreferrer external author help license prev next bookmark search alternate tag |
Relationship between the current document and the target URL. |
| hreflang | language-code | Target URL's language |
| type | media-type | Target URL's media type |
| media | media query | Target URL's optimized media or device |
| download | filename | Makes the hyperlink downloadable instead or redirection |
For additional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on the area tag in HTML5.
| Attribute | Description | Alternative |
|---|---|---|
name |
Defines names for clickable areas. | id attribute |
nohref |
Indicates no hyperlink exists for the associated area. | Not providing href is sufficient |
tabindex |
Defines position in page tabbing order. | n/a |
type |
This attribute has not effect on an area. | n/a |
The <area> tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
Here is a list of media tags.
| Element | Description |
|---|---|
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <video> | Creates a video player on a page |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <embed> | Creates a container for an external resource |
| <iframe> | Creates a frame in which another web page can be embedded |
| <svg> | Displays an scalable vector image |
| <canvas> | Creates a graphics container where JavaScript can draw |
| <img> | Displays an image |
| <area> | Specifies a map area for an image |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <figure> | Displays self-contained content, usually an image |
| <figcaption> | Adds a caption to a <figure> (image) element |
Here is when <abbr> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
