<area>

Designates clickable regions within image maps

Quick Answer

What is the <area> tag?

The <area> tag defines clickable areas within an image map (used with <map>). It specifies shapes (rect, circle, poly) and coordinates to create interactive regions on an image. Each area has an href attribute for linking. This allows different parts of a single image to link to different destinations.

Definition and Usage

The <area> element establishes a clickable area inside an image map.

An image map is an image with one or more clickable areas. The <area> tag is always nested inside a <map> tag.

The <area> tag is a void element (self-closing), meaning it has no closing tag.

Tip: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.

Note: The <area> element can have three shapes: rectangle (rect), circle (circle), or polygon (poly).

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Attribute	Value	Description
alt	text	Specifies an alternate text for the area. Required if the href attribute is present
coords	coordinates	Specifies the coordinates of the area
href	URL	Specifies the hyperlink target for the area
shape	default rect circle poly	Specifies the shape of the area
target	_blank _self _parent _top	Specifies where to open the target URL
download	filename	Specifies that the target will be downloaded when clicked
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Specifies the relationship between the current document and the target URL

Examples

Rectangular Area

Create a clickable rectangular area on an image:

Example

Unavailable or blocked: image “workplace.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="300" />

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

Circular Area

Create a clickable circular area:

Example

Unavailable or blocked: image “planets.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="planets.jpg" alt="Planets" usemap="#planetmap" width="600" height="400" />

<map name="planetmap">
  <area shape="circle" coords="180,139,14" alt="Venus" href="venus.html" />
</map>

<!-- coords format: x,y,radius -->

Polygon Area

Create a clickable polygon-shaped area:

Example

Unavailable or blocked: image “shapes.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="shapes.jpg" alt="Shapes" usemap="#shapemap" width="500" height="400" />

<map name="shapemap">
  <area
    shape="poly"
    coords="140,121,181,116,204,160,204,222,191,270,140,329"
    alt="Triangle"
    href="triangle.html"
  />
</map>

<!-- coords format: x1,y1,x2,y2,x3,y3,... -->

Multiple Clickable Areas

Create multiple clickable areas on a single image:

Example

Unavailable or blocked: image “office.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="office.jpg" alt="Office" usemap="#officemap" width="600" height="400" />

<map name="officemap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html" />
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html" />
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html" />
</map>

Area with Target Attribute

Open link in a new tab:

Example

Unavailable or blocked: image “world.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="world.jpg" alt="World Map" usemap="#worldmap" width="800" height="600" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,400,300"
    alt="North America"
    href="north-america.html"
    target="_blank"
  />
</map>

JavaScript Interaction

Add click event handlers to area elements:

Example

The snippet includes JavaScript inside its HTML. Unavailable or blocked: image “menu.jpg”; browser dialog “alert()”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="menu.jpg" alt="Menu" usemap="#menumap" width="500" height="300">

<map name="menumap">
  <area shape="rect" coords="0,0,250,150" alt="Appetizers"
        href="#" onclick="showSection('appetizers'); return false;">
  <area shape="rect" coords="250,0,500,150" alt="Main Courses"
        href="#" onclick="showSection('mains'); return false;">
</map>

<script>
  function showSection(section) {
    alert('You clicked: ' + section);
  }
</script>

Coordinate Calculation Guide

Understanding coordinates for different shapes:

Coordinate Formats
<!-- Rectangle: left,top,right,bottom -->
<area shape="rect" coords="x1,y1,x2,y2" href="..." />

<!-- Circle: centerX,centerY,radius -->
<area shape="circle" coords="x,y,r" href="..." />

<!-- Polygon: x1,y1,x2,y2,x3,y3,... -->
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4" href="..." />

<!-- Default: covers entire image -->
<area shape="default" href="..." />

Try it Yourself

Interactive Example

Click different areas of this color chart:

This demonstrates how image maps work with clickable areas!

🚀 Try in Code Playground

Best Practices

Always provide meaningful alt text for accessibility
Use image editing software to determine exact coordinates
Consider responsive design - image maps don't scale automatically
Use CSS to highlight areas on hover for better UX
Test clickable areas on different screen sizes
Provide keyboard navigation alternatives for accessibility
Consider using CSS or SVG for more flexible interactive images

Tools for Creating Image Maps

Online Tools: Image Map Generator, HTML Image Map Creator
Desktop Software: Adobe Dreamweaver, GIMP with image map plugin
Browser DevTools: Use element inspector to find coordinates
JavaScript Libraries: ImageMapster, jQuery RWD Image Maps

Related Tags

<map>
Defines an image map
<img>
Defines an image
<a>
Defines a hyperlink