Path // www.yourhtmlsource.com → Reference → <MAP> ELEMENT

<map> element

by Ross Shannon

The <map> element defines a client-side image map, which is an image with clickable areas. It contains <area> elements that define the clickable regions and their destinations. The map is associated with an image using the usemap attribute on the <img> element.

Clock This page was last updated on 2025-11-17


Syntax

The <map> element contains <area> elements and is linked to an image:

<img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fplanets.jpg&mode=full" alt="Solar System" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="90,58,30" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fmercury.html&mode=full" alt="Mercury">
  <area shape="circle" coords="180,139,40" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fvenus.html&mode=full" alt="Venus">
  <area shape="circle" coords="280,200,50" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fearth.html&mode=full" alt="Earth">
</map>

Key Attributes

  • name (required) — The name of the map. This must match the usemap attribute on the associated image (without the # prefix).

The name attribute is the only required attribute for the <map> element. The actual clickable regions are defined using <area> elements inside the map.

Examples

Simple Navigation Image Map

<img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fnavbar.png&mode=full" alt="Site Navigation" usemap="#navmap" width="600" height="50">

<map name="navmap">
  <area shape="rect" coords="0,0,150,50" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2F&mode=full" alt="Home">
  <area shape="rect" coords="150,0,300,50" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Fproducts%2F&mode=full" alt="Products">
  <area shape="rect" coords="300,0,450,50" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Fservices%2F&mode=full" alt="Services">
  <area shape="rect" coords="450,0,600,50" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Fcontact%2F&mode=full" alt="Contact">
</map>

Geographic Map with Regions

<img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fus-map.png&mode=full" alt="United States Map" usemap="#usmap" width="800" height="500">

<map name="usmap">
  <area
    shape="poly"
    coords="50,100,100,80,150,100,120,150,60,140"
    href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fcalifornia.html&mode=full"
    alt="California">
  <area
    shape="poly"
    coords="600,150,650,130,700,160,680,200,620,190"
    href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fflorida.html&mode=full"
    alt="Florida">
  <area
    shape="rect"
    coords="400,100,500,180"
    href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Ftexas.html&mode=full"
    alt="Texas">
</map>

Interactive Diagram

<img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fcomputer-parts.jpg&mode=full" alt="Computer Diagram" usemap="#pcmap">

<map name="pcmap">
  <area shape="rect" coords="20,50,200,150" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fcpu.html&mode=full" alt="CPU - Central Processing Unit">
  <area shape="rect" coords="220,50,400,150" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fram.html&mode=full" alt="RAM - Memory">
  <area shape="circle" coords="150,250,60" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fhdd.html&mode=full" alt="Hard Drive Storage">
  <area shape="poly" coords="300,200,400,200,450,250,350,300,250,250" href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Fgpu.html&mode=full" alt="Graphics Card">
</map>

When to Use

Appropriate Use Cases:

  • Geographic maps where different regions link to different pages
  • Organizational charts with clickable positions
  • Product images with clickable components
  • Educational diagrams with interactive parts
  • Floor plans with clickable rooms or areas

Accessibility Best Practices:

  • Always provide meaningful alt text for each <area> element
  • The base image should have descriptive alt text explaining the overall image
  • Areas are keyboard-navigable — users can tab through clickable regions
  • Screen readers announce each area’s alt text when focused
  • Consider providing a text-based list of links as an alternative for complex maps
  • Ensure clickable areas are large enough for easy mouse/touch interaction

Important Considerations:

  • Image maps are not responsive — coordinates are fixed pixel values
  • If the image is resized, the clickable areas won’t adjust automatically
  • For responsive designs, consider using SVG with embedded links instead
  • The map can be placed anywhere in the document, not necessarily near the image

Modern Alternatives:

  • SVG with links — Scalable, styleable, and responsive
  • CSS positioned overlays — Flexible and responsive
  • JavaScript-based solutions — Dynamic and interactive
  • Responsive image map libraries — Automatically adjust coordinates on resize
  • <area> — Defines clickable regions within the map
  • <img> — Image element with usemap attribute
  • <a> — Standard hyperlink element
  • <object> — Can also use image maps via usemap