HTML shape attribute

The shape attribute represents the shape to be created on an image.


 <img src="imagemap.jpg" usemap="#shapes" alt="three shapes of triangle, square, circle">
 <map name="shapes">
  <area href="blue.html" shape="circle" coords="196,89,33" >
Try </>

shape attribute values

shape attribute is an enumerated attribute. The attribute that has more than one keywords as value is called enumerated attributes.


It represents a shape of a circle. It has three points. The syntax to define the shape of a circle.

<area href="URL" shape="circle" coords="X,Y,R">
  • X is the distance from the center of the circle to the left side of the image.

  • Y is the distance from the center of the circle to the top side of the image.

  • R is the radius of the circle.


It defines a shape of a rectangle. A rectangle has four points. The syntax to make a shape of the rectangle.

<area href="URL" shape="rectangle" coords="A,B,C,D">

For more information about coordinates visit coords attribute.


A polygon has more than one points. And a point has two coordinates (one coordinate is the distance from the left edge of the image and the other one is the distance from the top edge of the image). For example, hexagon, heptagon or more shapes.


The default shape is the whole image. The default shape has 0 coordinates.

Related Tags

<area> tag

<area> element represents a link corresponding to an area on an image.

Visit Coords attribute to get the information about coordinates.

Was this article helpful?




Get the newsletter