area (HTML element)

Spec
Depr. Empty Version
No Yes HTML 3.2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+
Full Full Full Full

Syntax

<area alt="string" coords="coordinates" href="uri" shape=" { circle | default | poly | rect } "/>

Description

We use the area element to define each hotspot that’s clickable or actionable and will act as a link within a client-side image map . The behavior of a hotspot is similar to a normal link (the a element) in that it can be activated with a mouse click or the keyboard, and it’s used to link to another web page or resource; it’s also similar to the image element because, as it defines a specific area of a larger image, it requires us to set an alt attribute for those using non-visual browsers.

The hit, or actionable, area of the image is defined using a combination of the shape and coords attributes, which create the hit area boundaries as a sequence of x,y coordinate pairings.

Example

This code identifies one area element within an image map:

<map name="bigthings" id="bigthings">
  <area shape="rect" coords="35,4,205,108"
      href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
      alt="Australia's Big Things (on Wikipedia)"/>
  ⋮
</map>
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"
    border="0" usemap="#bigthings"/></p>

Use This For …

This element is used to create clickable or actionable areas on an image. For example, you might use it to create a graphically rich navigation mechanism such as a map on which the different countries or regions are the clickable areas.

Note that not every area needs to be actionable. It’s perfectly acceptable to use area without an href attribute for the purposes of outlining a given area, and for providing additional help in the form of a tooltip created using the title attribute. However, this technique is inaccessible to people who use anything other than a mouse to navigate the web page, since there will be no mouse hover event for those users—the usual trigger for the tooltip display.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

User-contributed notes

There are no comments yet.

Related Products