HTML <area> Tag

The <area> tag defines a clickable area or region inside an image. Below is an example of an area that delineates California in a map of the USA.

HTML Tag
<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');">

Using <area>

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 an area on an image.

Example

#

A computer image with 3 clickable <area> tags for screen, keyboard, and mouse.
Click on any of these and an alert box will display the area name.

Computer Screen Keyboard Mouse
<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>

Code Explanation

  • <img> - creates the image that will be partitioned in clickable areas.
  • <map> - associates the image to the clickable areas.
  • <area> - creates an area inside the image map.

Area attributes explanation

  • shape - defines the area shape. Accepts the following values:
    • rect - rectangular region
    • circle - circular region
    • poly - polygonal region
    • default - entire region
  • coords - sets the area coordinates
  • alt - alternative text when image is not available
  • href - link for when area is clicked

Attributes for <area>

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.


Obsolete Attributes

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

Media Tags

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, these tags 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

Browser support

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

You may also like

Guides