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

<area> element

by Ross Shannon

The <area> element defines a clickable area inside an image map. It is a void element (self-closing) that must be used inside a <map> element. Each area specifies a shape, coordinates, and a destination URL, allowing different parts of an image to link to different locations.

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


Syntax

The <area> element is a void element used within a <map> element:

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" href="computer.html" alt="Computer">
  <area shape="circle" coords="337,300,44" href="phone.html" alt="Phone">
</map>

Key Attributes

  • shape — The shape of the clickable area. Values:
    • rect — Rectangle (default)
    • circle — Circle
    • poly — Polygon (any number of sides)
    • default — Entire image area not covered by other shapes
  • coords — Coordinates defining the area. Format depends on shape:
    • rect: x1,y1,x2,y2 (top-left and bottom-right corners)
    • circle: x,y,radius (center point and radius)
    • poly: x1,y1,x2,y2,x3,y3,... (pairs of x,y coordinates for each vertex)
  • href — The URL that the area links to. If omitted, the area is not a link.
  • alt (required when href is present) — Alternative text describing the link destination. Essential for accessibility.
  • target — Where to open the linked document (_blank, _self, _parent, _top).
  • download — Indicates the link should download the resource rather than navigate to it.
  • rel — Relationship between current document and linked document.
  • referrerpolicy — Controls what referrer information is sent when following the link.

Examples

Rectangle and Circle Areas

<img src="workspace.jpg" alt="Workspace" usemap="#workspace">

<map name="workspace">
  <area
    shape="rect"
    coords="0,0,200,150"
    href="monitor.html"
    alt="Computer Monitor">
  <area
    shape="circle"
    coords="250,100,30"
    href="coffee.html"
    alt="Coffee Mug">
  <area
    shape="rect"
    coords="300,50,400,200"
    href="keyboard.html"
    alt="Keyboard">
</map>

Polygon Area

<img src="logo.png" alt="Company Logo" usemap="#logomap">

<map name="logomap">
  <area
    shape="poly"
    coords="50,0,100,50,50,100,0,50"
    href="about.html"
    alt="About Us">
</map>

Polygon coordinates define each vertex of the shape as x,y pairs.

Non-Linking Area

<area shape="rect" coords="100,100,200,200">

An area without an href attribute creates a dead zone that doesn’t link anywhere.

When to Use

Appropriate Use Cases:

  • Geographic maps with clickable regions
  • Floor plans with clickable rooms
  • Diagrams with interactive parts
  • Infographics with multiple clickable areas

Accessibility Considerations:

  • Always provide descriptive alt text for each area with an href
  • Areas are keyboard accessible and will receive focus when tabbing
  • Screen readers announce the alt text when users navigate to the area
  • Consider providing a text-based alternative list of links for complex image maps
  • Ensure clickable areas are large enough for easy interaction

Modern Alternatives:

  • SVG with links — More flexible, scalable, and easier to maintain
  • CSS positioned links — Overlay invisible links on images using absolute positioning
  • JavaScript interactivity — Canvas or DOM-based click detection

While image maps still work, SVG is often preferred for modern interactive graphics due to its scalability and better styling options.

  • <map> — Container for area elements
  • <img> — Image element with usemap attribute
  • <a> — Standard anchor/link element