<area> HTML Tag

Element of
Images
What does <area> HTML Tag do?
The <area> element is used as a child of a <map> element to define clickable a region on an image map. Different regions of an image map can be hyperlinked to different locations by nesting multiple <area> elements in a single <map> element.
Display
block

Code Example

<img src="/wp-content/uploads/shapes.png" usemap="shapes-map">

<map name="shapes-map">
  <area shape="rect" title="Square" coords="19,28,222,228" href="/wp-content/uploads/square.png" target="_blank" />
  <area shape="circle" title="Circle" coords="361,132,96" href="/wp-content/uploads/circle.png" target="_blank" />
</map>

Image map

An image map is a type of User Interface where clicking on different sections of an image lead to different results. To make an image map, you need three things:

  1. an image, in an <img> element with the usemap attribute pointing to a valid on-page image map defined in a
  2. <map> element, which contains
  3. one or more clickable <area> elements.

The <area> element

Each <area> element defined a clickable area within an image map. The area is defined with the (required) shape and coords attributes. The shape attribute defines the shape of the area (rectangle, circle, or [polygon), and the coords indicates the size placement of the area over the image. The <area> element also defines other attributes associated with anchor links, including href and target.

Learn About Image Maps

For complete details, see our tutorial on How to Make an Image Map, as well as the reference documentation for the <map> element, and the related documentation pages listed below.

Browser Support for <area> HTML Tag

AllAllAllAllAllAll