HTML shape Attribute

Introduction

The shape attribute is used on <area> elements inside an HTML image map. Together with coords, it defines the geometry of each clickable region on an image linked via usemap. Values include rect, circle, poly, and default.

What You’ll Learn

Purpose of shape

The primary purpose of the shape attribute is to tell the browser what kind of geometry the coords values describe for a clickable hotspot. Image maps let one image link to multiple destinations—a floor plan, a product diagram, or a navigation graphic with distinct regions.

By choosing the correct shape, you match the hotspot to the visual region: rectangles for boxes, circles for round buttons, polygons for irregular outlines, and default for anywhere not covered by other areas.

📝 Syntax

Add shape to <area> elements inside a <map> linked from an <img usemap>:

<img src="diagram.png" alt="Product diagram" usemap="#productMap">

<map name="productMap">
  <area shape="rect" coords="0,0,50,50" href="/part-a" alt="Part A">
</map>

Syntax Rules

• Valid on <area> elements inside <map>.
• Value must be one of: rect, circle, poly, or default.
• Must be used with a matching coords attribute (except default, which ignores coords).
• The parent <img> links the map with usemap="#mapName".
• Include meaningful alt on each area for accessibility.
• If shape is omitted, browsers treat the area as rect.

💎 Values

The shape attribute accepts four keyword values. Each determines how to interpret coords:

• rect — Rectangle. coords="x1,y1,x2,y2" (top-left and bottom-right corners).
• circle — Circle. coords="cx,cy,r" (center x, center y, and radius in pixels).
• poly — Polygon. coords="x1,y1,x2,y2,..." (pairs of vertex coordinates).
• default — Entire remaining image not covered by other areas. No coords needed.

<map name="exampleMap">
  <area shape="rect" coords="0,0,50,50" href="a.html" alt="Area 1">
  <area shape="circle" coords="100,100,50" href="b.html" alt="Area 2">
  <area shape="poly" coords="200,0,250,50,200,100" href="c.html" alt="Area 3">
  <area shape="default" href="fallback.html" alt="Rest of image">
</map>

Note: For circle, the radius is the third number in coords—there is no separate radius attribute on <area>.

Applicable Elements

shape vs coords vs usemap

Examples Gallery

Image map with rect, circle, and poly areas, plus dynamic area.shape updates in JavaScript.

👀 Live Preview

Clickable image map with three shaped regions (links log to console on click):

Left: rect · Center: circle · Right: poly

Example — rect, circle, and poly Areas

A complete image map with three shaped hotspots:

shape.html

Copy

<img src="diagram.png" alt="Example diagram" usemap="#exampleMap">

<map name="exampleMap">
  <area shape="rect" coords="0,0,50,50" href="destination1.html" alt="Clickable area 1">
  <area shape="circle" coords="100,100,50" href="destination2.html" alt="Clickable area 2">
  <area shape="poly" coords="200,0,250,50,200,100" href="destination3.html" alt="Clickable area 3">
</map>

View Output Try It Yourself

📤 Output:

Three hotspots: a rectangle (top-left 50×50), a circle (center 100,100 radius 50), and a triangle-like polygon.

How It Works

Each <area> declares its geometry with shape and coords. The browser hit-tests clicks against those regions and follows the matching href.

Example — default Fallback Region

Link any unmapped pixels with shape="default":

shape-default.html

Copy

<map name="navMap">
  <area shape="rect" coords="10,10,90,40" href="/home" alt="Home button">
  <area shape="default" href="/overview" alt="Full diagram">
</map>

View Output Try It Yourself

📤 Output:

Clicks on the home button hit the rect area; clicks anywhere else on the image use the default link.

How It Works

default is a catch-all for pixels not inside any other defined area. Use only one default area per map.

Dynamic Values with JavaScript

Update shape and coords when regions need to change at runtime:

dynamic-shape.html

Copy

<area id="dynamicArea" coords="0,0,40,40" href="#" alt="Dynamic region">

<script>
  var area = document.getElementById("dynamicArea");
  area.shape = "rect";
  area.coords = "50,50,100,100";
</script>

View Output Try It Yourself

📤 Output:

Assigning area.shape and area.coords moves or reshapes the hotspot without reloading the page.

How It Works

HTMLAreaElement.shape reflects the attribute. When changing shape type, always update coords to match the new geometry rules.

♿ Accessibility

• Meaningful alt on every area — Describe what the hotspot links to, not just “clickable area.”
• Descriptive img alt — The image itself needs alt text summarizing the whole diagram.
• Keyboard access — Image map areas are focusable links; ensure tab order makes sense.
• Consider responsive alternatives — Fixed pixel coords do not scale; for mobile-first sites, a list of links or SVG may be more accessible.
• Avoid tiny hotspots — Small click targets are hard for motor-impaired users; keep regions generously sized.

💡 Best Practices