HTML Tutorial: Complete HTML Tutorial
About Lesson

The <area> Tag in HTML


The <area> tag in HTML is used to define clickable areas within an image map. These areas can be hyperlinked to different destinations, providing an interactive experience for users. The tag is often used in conjunction with the <map> tag to create complex navigation structures within images.

Example: Creating an Interactive Campus Map

Sponsored by Google

Suppose you have a map of a university campus, and you want to create clickable areas for different buildings, such as the library, cafeteria, and gym. Here’s how you can do it:

<img src="campus-map.jpg" usemap="#campusmap">
<map name="campusmap">
  <area shape="rect" coords="100,50,200,150" alt="Library" href="library.html">
  <area shape="polygon" coords="300,200,350,250,400,200" alt="Cafeteria" href="cafeteria.html">
  <area shape="circle" coords="500,400,50" alt="Gym" href="gym.html">


In this example, we have an image of a campus map (campus-map.jpg) and three clickable areas defined within the <map> tag:

  • Library: A rectangular area that links to the library page (library.html).
  • Cafeteria: A polygon-shaped area that links to the cafeteria page (cafeteria.html).
  • Gym: A circular area that links to the gym page (gym.html).

The coords attribute specifies the coordinates for each shape, and the href attribute sets the target URL for each clickable area.

By using the <area> tag in conjunction with the <map> tag, you can create complex and interactive image maps that enhance the user experience.

Browser Support

The <area> tag is widely supported across modern browsers. Here’s a table summarizing the support:

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Internet Explorer Yes
Edge Yes


The <area> tag supports various attributes to define the properties of the clickable areas:

Attribute Value Description
alt text Provides alternate text for the area, describing its purpose or content.
coords coordinates Specifies the coordinates for the shape of the area, defining the clickable region.
download filename If present, the target will be downloaded when clicked.
href URL Sets the hyperlink target for the area, linking to a specific URL.
hreflang language_code Indicates the language of the target URL.
media media query Defines the media or device for which the target URL is optimized.
referrerpolicy policy Controls the referrer information sent with the link.
rel relationship Describes the relationship between the current document and the target URL.
shape shape type Defines the shape of the area (e.g., “rect”, “circle”, “polygon”).
target framename Determines where to open the target URL (e.g., “_blank” for a new tab).
type media_type Specifies the media type of the target URL, if applicable.

These attributes provide flexibility and control in defining clickable areas within an image map, allowing developers to create interactive and user-friendly navigation structures.

Global and Event Attributes

The <area> tag also supports Global Attributes in HTML and Event Attributes in HTML, allowing for further customization and interactivity.

More Examples

Here’s another example of an image map with clickable areas

<img src="another-image.jpg" usemap="#anothermap">
<map name="anothermap">
  <area shape="polygon" coords="145,300,236,145,356,212" alt="Area 3" href="link3.html">

Default CSS Settings

Most browsers will display the <area> tag with the following default CSS settings:

area {
  display: none;


The <area> tag offers a powerful way to create interactive images with clickable regions. By understanding its attributes and how to use them, developers can create engaging and user-friendly navigation structures within images.