# HTML <area> shape Attribute
The `shape` attribute of the `
` tag defines the geometric shape of an active, clickable region within an image map.
By pairing the `shape` attribute with the `coords` attribute, you can specify the exact size, shape, and position of the clickable hotspots on an image.
---
## Browser Support
The `shape` attribute is universally supported by all major modern web browsers:
* Google Chrome
* Mozilla Firefox
* Microsoft Edge / Internet Explorer
* Safari
* Opera
---
## Syntax
```html
```
---
## Attribute Values
| Value | Description | `coords` Format & Requirements |
| :--- | :--- | :--- |
| **`default`** | Specifies the entire image area as the clickable region. | No coordinates are required. |
| **`rect`** | Defines a rectangular region. | Requires 4 coordinates: `x1,y1,x2,y2`
• `x1,y1`: Top-left corner
• `x2,y2`: Bottom-right corner |
| **`circle`** | Defines a circular region. | Requires 3 coordinates: `x,y,r`
• `x,y`: Center of the circle
• `r`: Radius of the circle |
| **`poly`** | Defines a polygonal region (arbitrary shape). | Requires at least 6 coordinates (3 pairs): `x1,y1,x2,y2,...,xn,yn`
• Each pair represents a vertex of the polygon. |
---
## Code Example
Below is an example of an image map containing three clickable hotspots of different shapes (a rectangle and two circles):
```html
```
---
## Technical Considerations & Best Practices
### 1. Relationship with the `coords` Attribute
The `shape` attribute must always be used in conjunction with the `coords` attribute (except when `shape="default"` is used). If the coordinates do not match the expected format of the chosen shape, the browser will not render the clickable hotspot correctly.
### 2. Responsive Images and Image Maps
Standard HTML `
YouTip