HTML coords Attribute

Introduction

The coords attribute is used in HTML to define the coordinates of clickable areas within an image map. It belongs on the <area> element and works together with the shape attribute to describe where each hotspot sits on the associated image.

What You’ll Learn

Purpose of coords

The primary purpose of the coords attribute is to provide the position and size of a clickable region within an image. This is essential when creating image maps, where different parts of one image link to different destinations.

📝 Syntax

Place coords on an <area> inside a <map>:

<img src="diagram.png" alt="Site map" usemap="#site-map">

<map name="site-map">

  <area shape="rect" coords="0,0,100,100" href="/home" alt="Home">

</map>

Syntax Rules

• Values are comma-separated numbers in pixels relative to the image (no units in the attribute).
• Always pair coords with a matching shape attribute on the same <area>.
• Spaces after commas are optional: 10,10,100,100 and 10, 10, 100, 100 both work.
• Include a descriptive alt on every <area> for accessibility.

💎 Values

The coords format depends on the shape of the clickable area:

Rectangular area (shape="rect")

Use four values — x1, y1, x2, y2 — for the top-left and bottom-right corners of the rectangle:

<area shape="rect" coords="left, top, right, bottom" href="destination.html" alt="Description">

Circular area (shape="circle")

Use three values — x, y, radius — for the center point and radius:

<area shape="circle" coords="x, y, radius" href="destination.html" alt="Description">

Polygonal area (shape="poly")

Provide pairs of x, y values for each vertex. You need at least three points to form a polygon:

<area shape="poly" coords="x1, y1, x2, y2, x3, y3, ..." href="destination.html" alt="Description">

Applicable Elements

coords and shape work together

Examples Gallery

Full image map with multiple shapes and a JavaScript coords update.

👀 Live Preview

Click the HTML or CSS regions on this navigation diagram:

Example

Here’s an example of using the coords attribute within an image map with rect, circle, and poly shapes:

coords.html

Copy

<img src="diagram.png" alt="Clickable Image" usemap="#imageMap">

<map name="imageMap">

  <area shape="rect" coords="10, 10, 100, 100" href="destination1.html" alt="Area 1">

  <area shape="circle" coords="150, 80, 50" href="destination2.html" alt="Area 2">

  <area shape="poly" coords="220, 30, 300, 80, 250, 150" href="destination3.html" alt="Area 3">

</map>

View Output Try It Yourself

📤 Output:

How It Works

In this example, three clickable areas are defined within the image using different shape values and matching coords formats. Each area also needs an href and descriptive alt text.

Dynamic Values with JavaScript

You can dynamically set the coords attribute using JavaScript. This is useful when you need to adjust clickable areas based on responsive layouts or user interactions:

dynamic-coords.html

Copy

<area id="dynamicArea" shape="circle" href="/about" alt="About">



<script>

  // Dynamically set coords for a circular area

  document.getElementById("dynamicArea").coords = "200, 120, 80";

</script>

View Output Try It Yourself

📤 Output:

Expand hotspot

How It Works

In this script, the coords property is set on an <area> with id dynamicArea, defining a circle with center (200, 120) and radius 80. Assign a comma-separated string; the browser parses it according to the area’s shape.

♿ Accessibility

• alt on every area — Describe what each hotspot does so screen reader users understand the link purpose.
• Meaningful img alt — The image itself should describe the overall diagram, not just “image map.”
• Keyboard navigation — Image maps are focusable links; test Tab order through hotspots.
• Don’t rely on color alone — Label regions visibly; coords define invisible hit areas.
• Consider alternatives — For complex UIs, a list of text links may be easier for some users than a dense image map.

💡 Best Practices

• Ensure that the coordinates provided match the actual dimensions and positions within the image to create accurate clickable areas.
• Test your image maps across different browsers to ensure consistent behavior.
• Consider accessibility by providing descriptive alternative text (alt attribute) for each clickable area.