<area> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Web Images: Best Practices and HTML Code In One Useful Guide
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.

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" />

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.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for <area> HTML Tag