HTML shape Attribute

The HTML shape attribute is used with the <area> element to define the shape of a clickable or non-clickable region within an image map. It works with the coords attribute to determine the size and position of the area.

Elements That Use the shape Attribute

The shape attribute is used with the <area> element.

Element	Description
`<area>`	Defines the shape of an area within an image map.

Supported Values

The shape attribute is an enumerated attribute with four conforming values:

Value	Description
`rect`	Defines a rectangular area using four coordinates.
`circle`	Defines a circular area using three coordinates.
`poly`	Defines a polygonal area using three or more coordinate pairs.
`default`	Defines an area covering the entire image. The `coords` attribute is not used.

Rectangle Areas

The rect value defines a rectangular area. The coords attribute uses four coordinates in the order x1,y1,x2,y2, representing the upper-left and lower-right corners of the rectangle.

<area shape="rect" coords="0,0,200,250"
      href="/index-html.html" alt="HTML Tutorials">

The first pair identifies the upper-left corner and the second pair identifies the lower-right corner. Coordinate values are measured in CSS pixels from the upper-left corner of the image.

Circle Areas

The circle value defines a circular area. The coords attribute contains three values in the order x,y,radius.

<area shape="circle" coords="100,100,50"
      href="/index-html.html" alt="HTML Tutorials">

The first two values specify the center of the circle, while the third value specifies its radius in CSS pixels.

Polygon Areas

The poly value defines a polygon. The coords attribute contains a series of coordinate pairs representing the polygon's points in order.

<area shape="poly" coords="100,20,180,180,20,180"
      href="/index-html.html" alt="HTML Tutorials">

A polygon requires at least three coordinate pairs. Each pair identifies a point using its horizontal and vertical distance from the upper-left corner of the image.

Default Area

The default value represents the entire image area. When shape="default" is used, the coords attribute must not be specified.

<area shape="default"
      href="/index-html.html" alt="HTML Tutorials">

A default area can be useful as a fallback region for portions of an image map that are not covered by other areas.

Missing or Invalid Values

The missing value default and invalid value default for the shape attribute are both the rectangle state. Therefore, if shape is omitted or contains an invalid value, the area is treated as a rectangle.

<area coords="0,0,200,250"
      href="/index-html.html" alt="HTML Tutorials">

Although shape="rect" can be omitted when defining a rectangular area, including it can make the purpose of the coordinates easier to understand.

Common Mistakes

Do not use polygon instead of poly, rectangle instead of rect, or circ instead of circle. These older keyword forms are non-conforming; use the standard poly, rect, and circle values.

Do not use the coords attribute with shape="default". The default state represents the entire image and does not use coordinates.

Make sure the number and order of coordinate values match the selected shape. A rectangle uses four values, a circle uses three, and a polygon uses at least three coordinate pairs.

When an <area> contains an href attribute, provide an appropriate alt attribute so the destination of the image-map link can be understood without relying on the image alone.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The shape attribute on the <area> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the shape Attribute

The example divides a 400 × 250 image into two rectangular areas. The left half links to the HTML Tutorials and the right half links to the CSS Tutorials.

Play in Editor

Summary

The HTML shape attribute is used on the <area> element to define the shape of a region in an image map. The supported values are rect, circle, poly, and default. Except for default, the shape works with the coords attribute to define the area's size and position. If shape is omitted or invalid, the rectangle state is used.