HTML <area> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <area> tag is used to define clickable, interactive regions within an image map. It works in combination with the <map> and <img> elements, allowing different parts of a single image to act as separate links. Each <area> element represents a specific section of the image, such as a rectangle, circle, or custom polygon shape, and can be linked to different destinations or actions.

This tag is especially useful when creating visual navigation systems, interactive diagrams, floor plans, or illustrations where users can click on distinct areas rather than the entire image. For example, a world map could allow users to click on individual countries, or a diagram could provide detailed information when specific sections are selected.

The <area> element does not contain any visible content on its own. Instead, it defines invisible clickable zones that sit on top of an image. These regions are mapped using coordinates that correspond to the image’s dimensions, making precise placement important for usability and accessibility.

When used thoughtfully, the <area> tag helps improve user interaction by turning static images into engaging, functional interfaces while keeping the underlying HTML clean and structured.

Properties

Permitted Parents: Any element that accepts phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent.
Content: None. It is an empty element.
Start/End Tags: Start tag: required, End tag: forbidden

Example

HTML

<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />



<map name="shapes" id="shapes">

  <area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>

  <area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>

  <area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>

  <area shape="default" nohref="nohref" title="Default" alt="Default"/>

</map>

<script>

function clicked_on ( clicked_shape )

{

	alert ( "You clicked on the " + clicked_shape );

}

</script>

Result

Editor

Attributes

alt

Alternate text. This specifies text to be used in case the browser/user agent can't render the image.

coords

Specifies the coordinates of an area.

href

Specifies the hyperlink target for the area.

hreflang

Specifies the language of the target URL.

media

Specifies what media/device the target URL is optimized for.

rel

Specifies the relationship between the current document and the target URL.
Possible Values:

alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

shape

Specifies the shape of an area.
Possible Values:

default
rect
circle
poly

target

Specifies where to open the target URL.
Possible Values:

_blank
_parent
_self
_top

type

Specifies the MIME type of the target URL.

Global Attributes

The <area> tag also supports the Global Attributes in HTML5

Event Attributes

The <area> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <area> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.