HTML <area> tag

Updated: 09/12/2023 by Computer Hope
HTML area tag

When writing in HTML (hypertext markup language), the <area> tag is used to mark out certain sections within an image map. It is useful when you want an image on your page to have multiple hyperlinks. The following sections contain information about this tag, including an example of it in use, and related attributes and browser compatibility.

Note

The <area> element must be nested inside a <map> tag.

Example code

<img src="https://www.computerhope.com/cdn/computer-hope.jpg" alt="Computer 
Hope logo" width="412" height="82" usemap="#CHmap" class="logo"/>
<map name="CHmap">
<area shape="rect" coords="89,9,294,50" href="https://www.computerhope.com/jargon/c/computer.htm" alt="Computer">
<area shape="rect" coords="297,7,407,54" href="https://www.computerhope.com/hope.htm" alt="Hope">
</map>

Example result

Computer Hope logo Computer Hope

In the image above containing our logo, clicking the word "Computer" opens our computer definition page. Clicking the word "Hope" opens our hope definition page.

Attributes

All HTML tags support standard attributes that define the settings of an HTML element. In addition to the standard settings, the <area> tag has the following unique attributes.

Attribute Description
alt Designates the alternate text for each area of the image map.
coords Designates the coordinates of the area.
download Designates that the target will be downloaded upon being clicked.
href Designates the URL (uniform resource locator) of the web page.
hreflang Designates the language of the link.
media Designates the device for which the linked file is optimized.
rel Designates the relationship between the linked and current files.
shape Designates the shape of the area.
target Designates where the target URL opens.
type Designates the linked file's media type.

Deprecated attributes

In addition to the above attributes, the <area> tag had the following deprecated attributes.

Attribute Description
nohref Denotes that the area does not have a hyperlink associated with it.

Compatibility

Edge Internet Explorer Firefox Safari Opera Chrome
All versions All versions All versions All version All versions All versions

<a>, Browser, Compatibility, Logo, Target, URL, Web design terms