<area> - The Image Map Area Element

The `<area>` Element

Media Element HTML 2.0

The area element defines clickable regions within an image map. Each area element specifies a shape, coordinates, and destination link, creating interactive hotspots on images without requiring multiple image files or complex JavaScript.

Quick Example

<img src="https://picsum.photos/600/400"
   alt="Interactive image"
   usemap="#example-map"
   width="600"
   height="400">

<map name="example-map">
<area shape="rect"
      coords="50,50,250,200"
      href="#section1"
      alt="Rectangle region"
      title="Click me!">

<area shape="circle"
      coords="450,125,80"
      href="#section2"
      alt="Circle region"
      title="Or click me!">

<area shape="poly"
      coords="300,250,450,250,375,350"
      href="#section3"
      alt="Triangle region"
      title="Or me!">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/400"
   alt="Interactive image"
   usemap="#example-map"
   width="600"
   height="400">

<map name="example-map">
<area shape="rect"
      coords="50,50,250,200"
      href="#section1"
      alt="Rectangle region"
      title="Click me!">

<area shape="circle"
      coords="450,125,80"
      href="#section2"
      alt="Circle region"
      title="Or click me!">

<area shape="poly"
      coords="300,250,450,250,375,350"
      href="#section3"
      alt="Triangle region"
      title="Or me!">
</map>

Syntax

<area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="Description">

The <area> element is void (self-closing) and must be a child of a <map> element.

Essential Attributes

shape

Defines the type of clickable region:

Shape	Description	Coordinates Format
`rect`	Rectangle	`x1,y1,x2,y2` (top-left, bottom-right)
`circle`	Circle	`x,y,radius` (center x, center y, radius)
`poly`	Polygon	`x1,y1,x2,y2,x3,y3,...` (each vertex)
`default`	Entire image	No coordinates needed

<img src="https://picsum.photos/700/400"
   alt="Shape demonstration"
   usemap="#shapes-map"
   width="700"
   height="400">

<map name="shapes-map">
<!-- Rectangle -->
<area shape="rect"
      coords="50,50,250,180"
      href="#rect"
      alt="Rectangle: 50,50 to 250,180">

<!-- Circle -->
<area shape="circle"
      coords="450,115,65"
      href="#circle"
      alt="Circle: center 450,115 radius 65">

<!-- Polygon (pentagon) -->
<area shape="poly"
      coords="350,250,450,250,470,320,350,350,330,320"
      href="#poly"
      alt="Polygon: 5 vertices">
</map>

<div id="clicked-shape" style="margin-top: 1rem; padding: 1rem; border: 2px solid #3b82f6;">
Click shapes to see their details
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    const output = document.getElementById('clicked-shape');
    output.innerHTML = '<strong>Clicked:</strong> ' + area.alt +
                      '<br><strong>Shape:</strong> ' + area.shape +
                      '<br><strong>Coords:</strong> ' + area.coords;
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/700/400"
   alt="Shape demonstration"
   usemap="#shapes-map"
   width="700"
   height="400">

<map name="shapes-map">
<!-- Rectangle -->
<area shape="rect"
      coords="50,50,250,180"
      href="#rect"
      alt="Rectangle: 50,50 to 250,180">

<!-- Circle -->
<area shape="circle"
      coords="450,115,65"
      href="#circle"
      alt="Circle: center 450,115 radius 65">

<!-- Polygon (pentagon) -->
<area shape="poly"
      coords="350,250,450,250,470,320,350,350,330,320"
      href="#poly"
      alt="Polygon: 5 vertices">
</map>

<div id="clicked-shape" style="margin-top: 1rem; padding: 1rem; border: 2px solid #3b82f6;">
Click shapes to see their details
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    const output = document.getElementById('clicked-shape');
    output.innerHTML = '<strong>Clicked:</strong> ' + area.alt +
                      '<br><strong>Shape:</strong> ' + area.shape +
                      '<br><strong>Coords:</strong> ' + area.coords;
  });
});
</script>

coords

Specifies the coordinates of the clickable region. Format depends on shape:

<!-- coords: x1,y1,x2,y2 -->
<!-- x1,y1 = top-left corner -->
<!-- x2,y2 = bottom-right corner -->
<area shape="rect" coords="10,10,200,100" href="#link" alt="Rectangle">

Example: coords="10,10,200,100" — Top-left corner: (10, 10), Bottom-right corner: (200, 100), Width: 190 pixels, Height: 90 pixels.

<!-- coords: x,y,radius -->
<!-- x,y = center point -->
<!-- radius = radius in pixels -->
<area shape="circle" coords="150,150,75" href="#link" alt="Circle">

Example: coords="150,150,75" — Center point: (150, 150), Radius: 75 pixels, Diameter: 150 pixels.

<!-- coords: x1,y1,x2,y2,x3,y3,... -->
<!-- Each pair represents a vertex -->
<area shape="poly" coords="100,10,150,100,50,100" href="#link" alt="Triangle">

Example: coords="100,10,150,100,50,100" — Vertex 1: (100, 10) top, Vertex 2: (150, 100) bottom-right, Vertex 3: (50, 100) bottom-left, forming a triangle.

<!-- No coords needed - covers entire image -->
<area shape="default" href="#link" alt="Entire image">

Used as a fallback for areas not covered by other shapes.

href

Destination URL when the area is clicked:

<img src="https://picsum.photos/600/300"
   alt="Link destinations"
   usemap="#links-map"
   width="600"
   height="300">

<map name="links-map">
<!-- External link -->
<area shape="rect"
      coords="20,20,180,130"
      href="https://example.com"
      alt="External link"
      target="_blank"
      rel="noopener">

<!-- Internal link -->
<area shape="rect"
      coords="220,20,380,130"
      href="/about"
      alt="Internal link">

<!-- Anchor link -->
<area shape="rect"
      coords="420,20,580,130"
      href="#section"
      alt="Anchor link">

<!-- Email link -->
<area shape="rect"
      coords="20,170,180,280"
      href="mailto:info@example.com"
      alt="Email us">

<!-- Download link -->
<area shape="rect"
      coords="220,170,380,280"
      href="/document.pdf"
      download
      alt="Download PDF">

<!-- JavaScript handler -->
<area shape="rect"
      coords="420,170,580,280"
      href="javascript:void(0)"
      onclick="alert('Custom action!')"
      alt="Custom action">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/300"
   alt="Link destinations"
   usemap="#links-map"
   width="600"
   height="300">

<map name="links-map">
<!-- External link -->
<area shape="rect"
      coords="20,20,180,130"
      href="https://example.com"
      alt="External link"
      target="_blank"
      rel="noopener">

<!-- Internal link -->
<area shape="rect"
      coords="220,20,380,130"
      href="/about"
      alt="Internal link">

<!-- Anchor link -->
<area shape="rect"
      coords="420,20,580,130"
      href="#section"
      alt="Anchor link">

<!-- Email link -->
<area shape="rect"
      coords="20,170,180,280"
      href="mailto:info@example.com"
      alt="Email us">

<!-- Download link -->
<area shape="rect"
      coords="220,170,380,280"
      href="/document.pdf"
      download
      alt="Download PDF">

<!-- JavaScript handler -->
<area shape="rect"
      coords="420,170,580,280"
      href="javascript:void(0)"
      onclick="alert('Custom action!')"
      alt="Custom action">
</map>

alt (Required)

Alternative text describing the area for accessibility:

✓ Good Alt Text
✗ Bad Alt Text

<!-- Descriptive -->
<area shape="rect" coords="0,0,100,50"
      href="/products" alt="Go to Products page">

<!-- Action-oriented -->
<area shape="circle" coords="200,200,50"
      href="#signup" alt="Sign up for newsletter">

<!-- Context-aware -->
<area shape="poly" coords="50,0,100,50,0,50"
      href="/downloads" alt="Download software">

<!-- Empty for decorative -->
<area shape="rect" coords="300,0,400,50"
      href="#" alt="">

<!-- Too vague -->
<area shape="rect" coords="0,0,100,50"
      href="/products" alt="Click here">

<!-- Missing alt -->
<area shape="circle" coords="200,200,50"
      href="#signup">

<!-- Repeats href -->
<area shape="poly" coords="50,0,100,50,0,50"
      href="/downloads" alt="/downloads">

<!-- Filename -->
<area shape="rect" coords="300,0,400,50"
      href="#" alt="map_region_4.png">

Complete Attributes Reference

Attribute	Required	Description	Example
`shape`	No	Shape type	`rect`, `circle`, `poly`, `default`
`coords`	For most shapes	Region coordinates	`"10,10,200,100"`
`href`	No	Link destination	`"page.html"`, `"#anchor"`, `"mailto:"`
`alt`	Yes	Alternative text	`"Navigate to Products"`
`target`	No	Where to open link	`_blank`, `_self`, `_parent`, `_top`
`download`	No	Download file instead of navigating	`download` or `download="filename.pdf"`
`rel`	No	Relationship to target	`noopener`, `noreferrer`, `nofollow`
`ping`	No	URLs to ping when clicked	Space-separated URLs
`referrerpolicy`	No	Referrer policy	`no-referrer`, `origin`, etc.

Detailed Shape Examples

Rectangle Regions

<img src="https://via.placeholder.com/800x400/3b82f6/ffffff?text=Layout+Grid"
   alt="Grid layout"
   usemap="#grid-map"
   width="800"
   height="400">

<map name="grid-map">
<!-- 2x3 grid of rectangles -->
<area shape="rect" coords="0,0,266,200"
      href="#cell-1-1" alt="Row 1, Column 1">
<area shape="rect" coords="267,0,533,200"
      href="#cell-1-2" alt="Row 1, Column 2">
<area shape="rect" coords="534,0,800,200"
      href="#cell-1-3" alt="Row 1, Column 3">

<area shape="rect" coords="0,200,266,400"
      href="#cell-2-1" alt="Row 2, Column 1">
<area shape="rect" coords="267,200,533,400"
      href="#cell-2-2" alt="Row 2, Column 2">
<area shape="rect" coords="534,200,800,400"
      href="#cell-2-3" alt="Row 2, Column 3">
</map>

<p>Perfect for dividing images into grid-based regions</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/800x400/3b82f6/ffffff?text=Layout+Grid"
   alt="Grid layout"
   usemap="#grid-map"
   width="800"
   height="400">

<map name="grid-map">
<!-- 2x3 grid of rectangles -->
<area shape="rect" coords="0,0,266,200"
      href="#cell-1-1" alt="Row 1, Column 1">
<area shape="rect" coords="267,0,533,200"
      href="#cell-1-2" alt="Row 1, Column 2">
<area shape="rect" coords="534,0,800,200"
      href="#cell-1-3" alt="Row 1, Column 3">

<area shape="rect" coords="0,200,266,400"
      href="#cell-2-1" alt="Row 2, Column 1">
<area shape="rect" coords="267,200,533,400"
      href="#cell-2-2" alt="Row 2, Column 2">
<area shape="rect" coords="534,200,800,400"
      href="#cell-2-3" alt="Row 2, Column 3">
</map>

<p>Perfect for dividing images into grid-based regions</p>

Circle Regions

<img src="https://picsum.photos/700/500"
   alt="Multiple circles"
   usemap="#circles-map"
   width="700"
   height="500">

<map name="circles-map">
<!-- Large center circle -->
<area shape="circle"
      coords="350,250,120"
      href="#center"
      alt="Center region - Large circle">

<!-- Smaller surrounding circles -->
<area shape="circle"
      coords="150,150,60"
      href="#top-left"
      alt="Top left - Small circle">

<area shape="circle"
      coords="550,150,60"
      href="#top-right"
      alt="Top right - Small circle">

<area shape="circle"
      coords="150,350,60"
      href="#bottom-left"
      alt="Bottom left - Small circle">

<area shape="circle"
      coords="550,350,60"
      href="#bottom-right"
      alt="Bottom right - Small circle">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/700/500"
   alt="Multiple circles"
   usemap="#circles-map"
   width="700"
   height="500">

<map name="circles-map">
<!-- Large center circle -->
<area shape="circle"
      coords="350,250,120"
      href="#center"
      alt="Center region - Large circle">

<!-- Smaller surrounding circles -->
<area shape="circle"
      coords="150,150,60"
      href="#top-left"
      alt="Top left - Small circle">

<area shape="circle"
      coords="550,150,60"
      href="#top-right"
      alt="Top right - Small circle">

<area shape="circle"
      coords="150,350,60"
      href="#bottom-left"
      alt="Bottom left - Small circle">

<area shape="circle"
      coords="550,350,60"
      href="#bottom-right"
      alt="Bottom right - Small circle">
</map>

Polygon Regions

<img src="https://picsum.photos/800/500"
   alt="Polygon shapes"
   usemap="#poly-map"
   width="800"
   height="500">

<map name="poly-map">
<!-- Triangle (3 vertices) -->
<area shape="poly"
      coords="200,50,350,200,50,200"
      href="#triangle"
      alt="Triangle region">

<!-- Pentagon (5 vertices) -->
<area shape="poly"
      coords="600,50,750,150,700,280,500,280,450,150"
      href="#pentagon"
      alt="Pentagon region">

<!-- Star (10 vertices) -->
<area shape="poly"
      coords="400,300,430,380,510,390,450,440,470,520,400,480,330,520,350,440,290,390,370,380"
      href="#star"
      alt="Star region">
</map>

<p>Polygons can create any irregular shape</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/800/500"
   alt="Polygon shapes"
   usemap="#poly-map"
   width="800"
   height="500">

<map name="poly-map">
<!-- Triangle (3 vertices) -->
<area shape="poly"
      coords="200,50,350,200,50,200"
      href="#triangle"
      alt="Triangle region">

<!-- Pentagon (5 vertices) -->
<area shape="poly"
      coords="600,50,750,150,700,280,500,280,450,150"
      href="#pentagon"
      alt="Pentagon region">

<!-- Star (10 vertices) -->
<area shape="poly"
      coords="400,300,430,380,510,390,450,440,470,520,400,480,330,520,350,440,290,390,370,380"
      href="#star"
      alt="Star region">
</map>

<p>Polygons can create any irregular shape</p>

Complex Real-World Example

<img src="https://via.placeholder.com/900x600/1e3a8a/ffffff?text=World+Map"
   alt="World map regions"
   usemap="#world-map"
   width="900"
   height="600">

<map name="world-map">
<!-- North America (polygon) -->
<area shape="poly"
      coords="100,100,250,80,280,150,300,250,200,280,120,200"
      href="#north-america"
      alt="North America"
      title="North America">

<!-- Europe (polygon) -->
<area shape="poly"
      coords="400,150,500,140,520,200,480,250,420,240"
      href="#europe"
      alt="Europe"
      title="Europe">

<!-- Asia (polygon) -->
<area shape="poly"
      coords="550,120,750,100,800,200,780,300,650,280,580,200"
      href="#asia"
      alt="Asia"
      title="Asia">

<!-- Africa (polygon) -->
<area shape="poly"
      coords="420,280,520,270,540,380,500,450,440,430,400,350"
      href="#africa"
      alt="Africa"
      title="Africa">

<!-- South America (polygon) -->
<area shape="poly"
      coords="300,300,350,320,360,450,320,500,280,480,270,350"
      href="#south-america"
      alt="South America"
      title="South America">

<!-- Australia (circle approximation) -->
<area shape="circle"
      coords="700,450,60"
      href="#australia"
      alt="Australia"
      title="Australia">
</map>

<div id="continent" style="margin-top: 1rem; padding: 1rem; background: #dbeafe; border-radius: 4px;">
Click continents to learn more
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('continent').innerHTML =
      '<strong>' + area.alt + '</strong><br>Selected continent';
  });
  area.addEventListener('mouseenter', function() {
    document.getElementById('continent').innerHTML =
      '<strong>' + this.alt + '</strong><br>Hover state';
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/900x600/1e3a8a/ffffff?text=World+Map"
   alt="World map regions"
   usemap="#world-map"
   width="900"
   height="600">

<map name="world-map">
<!-- North America (polygon) -->
<area shape="poly"
      coords="100,100,250,80,280,150,300,250,200,280,120,200"
      href="#north-america"
      alt="North America"
      title="North America">

<!-- Europe (polygon) -->
<area shape="poly"
      coords="400,150,500,140,520,200,480,250,420,240"
      href="#europe"
      alt="Europe"
      title="Europe">

<!-- Asia (polygon) -->
<area shape="poly"
      coords="550,120,750,100,800,200,780,300,650,280,580,200"
      href="#asia"
      alt="Asia"
      title="Asia">

<!-- Africa (polygon) -->
<area shape="poly"
      coords="420,280,520,270,540,380,500,450,440,430,400,350"
      href="#africa"
      alt="Africa"
      title="Africa">

<!-- South America (polygon) -->
<area shape="poly"
      coords="300,300,350,320,360,450,320,500,280,480,270,350"
      href="#south-america"
      alt="South America"
      title="South America">

<!-- Australia (circle approximation) -->
<area shape="circle"
      coords="700,450,60"
      href="#australia"
      alt="Australia"
      title="Australia">
</map>

<div id="continent" style="margin-top: 1rem; padding: 1rem; background: #dbeafe; border-radius: 4px;">
Click continents to learn more
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('continent').innerHTML =
      '<strong>' + area.alt + '</strong><br>Selected continent';
  });
  area.addEventListener('mouseenter', function() {
    document.getElementById('continent').innerHTML =
      '<strong>' + this.alt + '</strong><br>Hover state';
  });
});
</script>

Advanced Features

target Attribute

Control where links open:

<img src="https://picsum.photos/600/300"
   alt="Target examples"
   usemap="#target-map"
   width="600"
   height="300">

<map name="target-map">
<!-- Open in new tab -->
<area shape="rect"
      coords="20,20,180,130"
      href="https://example.com"
      target="_blank"
      rel="noopener noreferrer"
      alt="Open in new tab">

<!-- Open in same tab (default) -->
<area shape="rect"
      coords="220,20,380,130"
      href="/page.html"
      target="_self"
      alt="Open in same tab">

<!-- Open in iframe -->
<area shape="rect"
      coords="420,20,580,130"
      href="/content.html"
      target="content-frame"
      alt="Open in iframe">
</map>

<iframe name="content-frame" style="width: 100%; height: 100px; margin-top: 1rem;"></iframe>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/600/300"
   alt="Target examples"
   usemap="#target-map"
   width="600"
   height="300">

<map name="target-map">
<!-- Open in new tab -->
<area shape="rect"
      coords="20,20,180,130"
      href="https://example.com"
      target="_blank"
      rel="noopener noreferrer"
      alt="Open in new tab">

<!-- Open in same tab (default) -->
<area shape="rect"
      coords="220,20,380,130"
      href="/page.html"
      target="_self"
      alt="Open in same tab">

<!-- Open in iframe -->
<area shape="rect"
      coords="420,20,580,130"
      href="/content.html"
      target="content-frame"
      alt="Open in iframe">
</map>

<iframe name="content-frame" style="width: 100%; height: 100px; margin-top: 1rem;"></iframe>

download Attribute

Force file download instead of navigation:

<img src="https://via.placeholder.com/600x300/6366f1/ffffff?text=Download+Resources"
   alt="Download center"
   usemap="#download-map"
   width="600"
   height="300">

<map name="download-map">
<!-- Download with custom filename -->
<area shape="rect"
      coords="50,50,250,250"
      href="/documents/report.pdf"
      download="Annual-Report-2024.pdf"
      alt="Download Annual Report">

<!-- Download with original filename -->
<area shape="rect"
      coords="350,50,550,250"
      href="/images/chart.png"
      download
      alt="Download Chart Image">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/600x300/6366f1/ffffff?text=Download+Resources"
   alt="Download center"
   usemap="#download-map"
   width="600"
   height="300">

<map name="download-map">
<!-- Download with custom filename -->
<area shape="rect"
      coords="50,50,250,250"
      href="/documents/report.pdf"
      download="Annual-Report-2024.pdf"
      alt="Download Annual Report">

<!-- Download with original filename -->
<area shape="rect"
      coords="350,50,550,250"
      href="/images/chart.png"
      download
      alt="Download Chart Image">
</map>

JavaScript Events

<img src="https://picsum.photos/700/400"
   alt="Interactive events"
   usemap="#events-map"
   width="700"
   height="400">

<map name="events-map">
<area shape="rect"
      coords="50,50,250,180"
      href="#region1"
      alt="Region 1"
      id="area1">

<area shape="circle"
      coords="450,115,65"
      href="#region2"
      alt="Region 2"
      id="area2">

<area shape="poly"
      coords="350,250,500,250,425,350"
      href="#region3"
      alt="Region 3"
      id="area3">
</map>

<div id="events-log" style="margin-top: 1rem; padding: 1rem; border: 1px solid #ccc; max-height: 150px; overflow-y: auto;">
Event log will appear here
</div>

<script>
const log = document.getElementById('events-log');

function logEvent(event, area) {
  const entry = document.createElement('div');
  entry.textContent = event + ': ' + area.alt;
  log.insertBefore(entry, log.firstChild);
}

document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    logEvent('Click', area);
  });
  area.addEventListener('mouseenter', () => logEvent('Mouse enter', area));
  area.addEventListener('mouseleave', () => logEvent('Mouse leave', area));
  area.addEventListener('focus', () => logEvent('Focus', area));
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://picsum.photos/700/400"
   alt="Interactive events"
   usemap="#events-map"
   width="700"
   height="400">

<map name="events-map">
<area shape="rect"
      coords="50,50,250,180"
      href="#region1"
      alt="Region 1"
      id="area1">

<area shape="circle"
      coords="450,115,65"
      href="#region2"
      alt="Region 2"
      id="area2">

<area shape="poly"
      coords="350,250,500,250,425,350"
      href="#region3"
      alt="Region 3"
      id="area3">
</map>

<div id="events-log" style="margin-top: 1rem; padding: 1rem; border: 1px solid #ccc; max-height: 150px; overflow-y: auto;">
Event log will appear here
</div>

<script>
const log = document.getElementById('events-log');

function logEvent(event, area) {
  const entry = document.createElement('div');
  entry.textContent = event + ': ' + area.alt;
  log.insertBefore(entry, log.firstChild);
}

document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    logEvent('Click', area);
  });
  area.addEventListener('mouseenter', () => logEvent('Mouse enter', area));
  area.addEventListener('mouseleave', () => logEvent('Mouse leave', area));
  area.addEventListener('focus', () => logEvent('Focus', area));
});
</script>

Accessibility Best Practices

<map name="nav-map">
  <!-- Action-oriented, describes purpose -->
  <area shape="rect" coords="0,0,100,40"
        href="/products" alt="Browse our product catalog">

  <!-- Indicates destination clearly -->
  <area shape="rect" coords="120,0,220,40"
        href="/support" alt="Get customer support">

  <!-- Describes action and result -->
  <area shape="rect" coords="240,0,340,40"
        href="/login" alt="Log in to your account">
</map>

<map name="nav-map">
  <!-- Too generic -->
  <area shape="rect" coords="0,0,100,40"
        href="/products" alt="Click here">

  <!-- Just the link text -->
  <area shape="rect" coords="120,0,220,40"
        href="/support" alt="Support">

  <!-- Missing alt entirely -->
  <area shape="rect" coords="240,0,340,40"
        href="/login">
</map>

Keyboard Accessibility

Area elements are focusable by default:

<style>
area:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
</style>

<img src="https://picsum.photos/600/300"
   alt="Keyboard accessible regions"
   usemap="#keyboard-map"
   width="600"
   height="300">

<map name="keyboard-map">
<area shape="rect"
      coords="50,50,250,250"
      href="#region1"
      alt="Region 1 - Press Enter to activate"
      title="Region 1">

<area shape="circle"
      coords="450,150,80"
      href="#region2"
      alt="Region 2 - Press Enter to activate"
      title="Region 2">
</map>

<p><strong>Try it:</strong> Press Tab to focus regions, Enter to activate</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
area:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
</style>

<img src="https://picsum.photos/600/300"
   alt="Keyboard accessible regions"
   usemap="#keyboard-map"
   width="600"
   height="300">

<map name="keyboard-map">
<area shape="rect"
      coords="50,50,250,250"
      href="#region1"
      alt="Region 1 - Press Enter to activate"
      title="Region 1">

<area shape="circle"
      coords="450,150,80"
      href="#region2"
      alt="Region 2 - Press Enter to activate"
      title="Region 2">
</map>

<p><strong>Try it:</strong> Press Tab to focus regions, Enter to activate</p>

Provide Text Alternative

<figure>
<img src="https://via.placeholder.com/700x400/8b5cf6/ffffff?text=Department+Directory"
     alt="Department directory (text links below)"
     usemap="#directory-map"
     width="700"
     height="400">

<map name="directory-map">
  <area shape="rect" coords="50,50,300,180" href="#hr" alt="Human Resources">
  <area shape="rect" coords="400,50,650,180" href="#it" alt="IT Department">
  <area shape="rect" coords="50,220,300,350" href="#sales" alt="Sales">
  <area shape="rect" coords="400,220,650,350" href="#marketing" alt="Marketing">
</map>

<figcaption>
  <strong>Quick Links:</strong>
  <a href="#hr">Human Resources</a> |
  <a href="#it">IT Department</a> |
  <a href="#sales">Sales</a> |
  <a href="#marketing">Marketing</a>
</figcaption>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<img src="https://via.placeholder.com/700x400/8b5cf6/ffffff?text=Department+Directory"
     alt="Department directory (text links below)"
     usemap="#directory-map"
     width="700"
     height="400">

<map name="directory-map">
  <area shape="rect" coords="50,50,300,180" href="#hr" alt="Human Resources">
  <area shape="rect" coords="400,50,650,180" href="#it" alt="IT Department">
  <area shape="rect" coords="50,220,300,350" href="#sales" alt="Sales">
  <area shape="rect" coords="400,220,650,350" href="#marketing" alt="Marketing">
</map>

<figcaption>
  <strong>Quick Links:</strong>
  <a href="#hr">Human Resources</a> |
  <a href="#it">IT Department</a> |
  <a href="#sales">Sales</a> |
  <a href="#marketing">Marketing</a>
</figcaption>
</figure>

Common Use Cases

<img src="https://via.placeholder.com/800x150/3b82f6/ffffff?text=Navigation+Bar"
   alt="Main navigation"
   usemap="#nav-map"
   width="800"
   height="150">

<map name="nav-map">
<area shape="rect" coords="50,50,150,100"
      href="/" alt="Home">
<area shape="rect" coords="200,50,300,100"
      href="/products" alt="Products">
<area shape="rect" coords="350,50,450,100"
      href="/services" alt="Services">
<area shape="rect" coords="500,50,600,100"
      href="/about" alt="About Us">
<area shape="rect" coords="650,50,750,100"
      href="/contact" alt="Contact">
</map>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/800x150/3b82f6/ffffff?text=Navigation+Bar"
   alt="Main navigation"
   usemap="#nav-map"
   width="800"
   height="150">

<map name="nav-map">
<area shape="rect" coords="50,50,150,100"
      href="/" alt="Home">
<area shape="rect" coords="200,50,300,100"
      href="/products" alt="Products">
<area shape="rect" coords="350,50,450,100"
      href="/services" alt="Services">
<area shape="rect" coords="500,50,600,100"
      href="/about" alt="About Us">
<area shape="rect" coords="650,50,750,100"
      href="/contact" alt="Contact">
</map>

Interactive Diagrams

<img src="https://via.placeholder.com/600x500/ec4899/ffffff?text=Car+Diagram"
   alt="Car parts diagram"
   usemap="#car-map"
   width="600"
   height="500">

<map name="car-map">
<!-- Hood -->
<area shape="poly"
      coords="150,100,450,100,480,180,120,180"
      href="#engine"
      alt="Engine compartment"
      title="Engine">

<!-- Windshield -->
<area shape="poly"
      coords="120,180,200,120,400,120,480,180"
      href="#windshield"
      alt="Windshield"
      title="Windshield">

<!-- Wheels -->
<area shape="circle"
      coords="180,400,60"
      href="#wheel-front"
      alt="Front wheel"
      title="Front Wheel">

<area shape="circle"
      coords="420,400,60"
      href="#wheel-rear"
      alt="Rear wheel"
      title="Rear Wheel">

<!-- Body -->
<area shape="rect"
      coords="150,200,450,350"
      href="#body"
      alt="Car body"
      title="Body">
</map>

<div id="part-info" style="margin-top: 1rem; padding: 1rem; background: #fce7f3; border-radius: 4px;">
Hover or click car parts to see information
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('mouseenter', function() {
    document.getElementById('part-info').innerHTML =
      '<strong>' + this.alt + '</strong><br>Click for detailed information';
  });
  area.addEventListener('click', (e) => {
    e.preventDefault();
    const info = document.getElementById('part-info');
    info.innerHTML = '<strong>' + area.alt + '</strong><br>Loading details...';
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/600x500/ec4899/ffffff?text=Car+Diagram"
   alt="Car parts diagram"
   usemap="#car-map"
   width="600"
   height="500">

<map name="car-map">
<!-- Hood -->
<area shape="poly"
      coords="150,100,450,100,480,180,120,180"
      href="#engine"
      alt="Engine compartment"
      title="Engine">

<!-- Windshield -->
<area shape="poly"
      coords="120,180,200,120,400,120,480,180"
      href="#windshield"
      alt="Windshield"
      title="Windshield">

<!-- Wheels -->
<area shape="circle"
      coords="180,400,60"
      href="#wheel-front"
      alt="Front wheel"
      title="Front Wheel">

<area shape="circle"
      coords="420,400,60"
      href="#wheel-rear"
      alt="Rear wheel"
      title="Rear Wheel">

<!-- Body -->
<area shape="rect"
      coords="150,200,450,350"
      href="#body"
      alt="Car body"
      title="Body">
</map>

<div id="part-info" style="margin-top: 1rem; padding: 1rem; background: #fce7f3; border-radius: 4px;">
Hover or click car parts to see information
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('mouseenter', function() {
    document.getElementById('part-info').innerHTML =
      '<strong>' + this.alt + '</strong><br>Click for detailed information';
  });
  area.addEventListener('click', (e) => {
    e.preventDefault();
    const info = document.getElementById('part-info');
    info.innerHTML = '<strong>' + area.alt + '</strong><br>Loading details...';
  });
});
</script>

Product Hotspots

<img src="https://via.placeholder.com/700x500/10b981/ffffff?text=Smart+Watch"
   alt="Smart watch features"
   usemap="#watch-map"
   width="700"
   height="500">

<map name="watch-map">
<!-- Display -->
<area shape="circle"
      coords="350,250,120"
      href="#display"
      alt="OLED Display - 1.4 inch retina screen"
      title="Display">

<!-- Digital Crown -->
<area shape="circle"
      coords="580,200,25"
      href="#crown"
      alt="Digital Crown - Navigate and scroll"
      title="Crown">

<!-- Side Button -->
<area shape="circle"
      coords="580,300,20"
      href="#button"
      alt="Side Button - Quick actions"
      title="Button">

<!-- Heart Rate Sensor -->
<area shape="circle"
      coords="350,450,40"
      href="#sensor"
      alt="Heart Rate Sensor - Track your health"
      title="Sensor">
</map>

<div id="feature-details" style="margin-top: 1rem; padding: 1rem; background: #d1fae5; border-radius: 4px;">
<strong>Explore Features:</strong> Hover over or click different parts of the watch
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('feature-details').innerHTML =
      '<strong>' + area.alt + '</strong>';
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="https://via.placeholder.com/700x500/10b981/ffffff?text=Smart+Watch"
   alt="Smart watch features"
   usemap="#watch-map"
   width="700"
   height="500">

<map name="watch-map">
<!-- Display -->
<area shape="circle"
      coords="350,250,120"
      href="#display"
      alt="OLED Display - 1.4 inch retina screen"
      title="Display">

<!-- Digital Crown -->
<area shape="circle"
      coords="580,200,25"
      href="#crown"
      alt="Digital Crown - Navigate and scroll"
      title="Crown">

<!-- Side Button -->
<area shape="circle"
      coords="580,300,20"
      href="#button"
      alt="Side Button - Quick actions"
      title="Button">

<!-- Heart Rate Sensor -->
<area shape="circle"
      coords="350,450,40"
      href="#sensor"
      alt="Heart Rate Sensor - Track your health"
      title="Sensor">
</map>

<div id="feature-details" style="margin-top: 1rem; padding: 1rem; background: #d1fae5; border-radius: 4px;">
<strong>Explore Features:</strong> Hover over or click different parts of the watch
</div>

<script>
document.querySelectorAll('area').forEach(area => {
  area.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById('feature-details').innerHTML =
      '<strong>' + area.alt + '</strong>';
  });
});
</script>

Browser Support

Feature	Chrome	Firefox	Safari	Edge
`<area>` element	1+	1+	1+	12+
`shape` attribute	1+	1+	1+	12+
`coords` attribute	1+	1+	1+	12+
`href` attribute	1+	1+	1+	12+
`alt` attribute	1+	1+	1+	12+
`target` attribute	1+	1+	1+	12+
`download` attribute	14+	20+	10.1+	13+
`ping` attribute	12+	❌	6+	17+

Limitations and Alternatives

Problems with Image Maps

Modern Alternatives

<style>
.modern-map {
  position: relative;
  display: inline-block;
  max-width: 600px;
}
.modern-map img {
  width: 100%;
  height: auto;
  display: block;
}
.hotspot {
  position: absolute;
  background: rgba(59, 130, 246, 0.3);
  border: 2px solid #3b82f6;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.hotspot:hover {
  background: rgba(59, 130, 246, 0.6);
  transform: scale(1.05);
}
</style>

<div class="modern-map">
<img src="https://picsum.photos/600/400" alt="Modern interactive image">

<!-- Responsive, styled hotspots -->
<a href="#region1" class="hotspot"
   style="top: 10%; left: 10%; width: 30%; height: 30%;">
  Region 1
</a>

<a href="#region2" class="hotspot"
   style="top: 10%; right: 10%; width: 30%; height: 30%;">
  Region 2
</a>

<a href="#region3" class="hotspot"
   style="bottom: 10%; left: 10%; width: 30%; height: 30%;">
  Region 3
</a>

<a href="#region4" class="hotspot"
   style="bottom: 10%; right: 10%; width: 30%; height: 30%;">
  Region 4
</a>
</div>

<p>Modern CSS-based approach: responsive, accessible, and easy to maintain</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.modern-map {
  position: relative;
  display: inline-block;
  max-width: 600px;
}
.modern-map img {
  width: 100%;
  height: auto;
  display: block;
}
.hotspot {
  position: absolute;
  background: rgba(59, 130, 246, 0.3);
  border: 2px solid #3b82f6;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.hotspot:hover {
  background: rgba(59, 130, 246, 0.6);
  transform: scale(1.05);
}
</style>

<div class="modern-map">
<img src="https://picsum.photos/600/400" alt="Modern interactive image">

<!-- Responsive, styled hotspots -->
<a href="#region1" class="hotspot"
   style="top: 10%; left: 10%; width: 30%; height: 30%;">
  Region 1
</a>

<a href="#region2" class="hotspot"
   style="top: 10%; right: 10%; width: 30%; height: 30%;">
  Region 2
</a>

<a href="#region3" class="hotspot"
   style="bottom: 10%; left: 10%; width: 30%; height: 30%;">
  Region 3
</a>

<a href="#region4" class="hotspot"
   style="bottom: 10%; right: 10%; width: 30%; height: 30%;">
  Region 4
</a>
</div>

<p>Modern CSS-based approach: responsive, accessible, and easy to maintain</p>

Container element that holds area elements. Learn more →

Image element that references the map. Learn more →

<area> - The Image Map Area Element

The `<area>` Element

Quick Example

Syntax

Essential Attributes

shape

coords

href

alt (Required)

Complete Attributes Reference

Detailed Shape Examples

Rectangle Regions

Circle Regions

Polygon Regions

Complex Real-World Example

Advanced Features

target Attribute

download Attribute

JavaScript Events

Accessibility Best Practices

Descriptive Alt Text

Keyboard Accessibility

Provide Text Alternative

Common Use Cases

Image Navigation

Interactive Diagrams

Product Hotspots

Browser Support

Limitations and Alternatives

Problems with Image Maps

Modern Alternatives

Specifications

<area> - The Image Map Area Element

The <area> Element

Quick Example

Syntax

Essential Attributes

shape

coords

href

alt (Required)

Complete Attributes Reference

Detailed Shape Examples

Rectangle Regions

Circle Regions

Polygon Regions

Complex Real-World Example

Advanced Features

target Attribute

download Attribute

JavaScript Events

Accessibility Best Practices

Descriptive Alt Text

Keyboard Accessibility

Provide Text Alternative

Common Use Cases

Image Navigation

Interactive Diagrams

Product Hotspots

Browser Support

Limitations and Alternatives

Problems with Image Maps

Modern Alternatives

Related Elements

Specifications

The `<area>` Element