1. Web Design
  2. HTML

HTML Element: area

Scroll to top
Read Time: 3 min

The <area> element is used with the <map> element to define clickable areas on an image. This pairing allows you to create interactive image maps where different parts of the image can be linked to different URLs.


<map name="map">
  <area shape="rect"coords="0, 0, 50, 50" href="page.html">


<img src="image.jpg" usemap="#mymap">
<map name="mymap">
  <area shape="rect" coords="0, 0, 50, 50" href="page1.html">
  <area shape="rect" coords="50, 0, 100, 50" href="page2.html">
  <area shape="rect" coords="0, 50, 50, 100" href="page3.html">
  <area shape="rect" coords="50, 50, 100, 100" href="page4.html">

In this example, we have an image with a map named mymap. The map has four areas defined with the <area> element, each with a different shape, coordinates, and URL.


Here’s how we might put an image with four areas to use:


The <area> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much effect on some).

  • shape: can be set to circle, default, poly, or rect, depending on the shape of the clickable area.
  • coords: defines the coordinates of the clickable area (more details below).
  • href: specifies the URL that the clickable area should link to.

Other attributes include alt, target, download, ping, rel, and referrerpolicy.

How Does the coords Attribute Work?

The coords attribute is where we define the coordinates of the shape attribute. 

For example, if the shape is rect (a rectangle) as in our demo above, you would define the top-left and bottom-right coordinates of the rectangle. A rectangle with the coordinates 0,0,50,50 would have its top-left corner placed at 0,0 and its bottom-right corner at 50,50:

a graphic illustrating the coordinates system of shapes within HTMLa graphic illustrating the coordinates system of shapes within HTMLa graphic illustrating the coordinates system of shapes within HTML

So that’s rectangles, but for other shapes the coords attributes accepts different values:

  • circle: the accepted value is x,y,radius where x,y are the coordinates of the circle center, followed by the radius.
  • poly: the accepted value is x1,y1,x2,y2,..,xn,yn where the pairs dictate the points along the edges of the polygon. The first and last coordinate pairs are expected to be the same, but if that’s not the case the browser will add a last value to close the shape.


The <area> element is often used in conjunction with the <img> element, but it can also be used with other elements such as <object> and <canvas>. The element can be used when phrasing content is expected, but only if there is a map element ancestor.

Did You Know?

  • The <area> element was first introduced in HTML 3.2, which was released way back in 1997!
  • No end tag is necessary when authoring an <area> tag.

Learn More

  • Official W3C specification <area>
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.