<area>

Designates clickable regions within image maps

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

The <area> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

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
<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
<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
<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
<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
<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
<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