area

FilterElements

HTML: <area>
XHTML: <area/> or <area />

The area element is used within the map element of a client-side image map to define a specific clickable ("hot") area.

Start/End Tags

This is an empty element. In HTML, the end tag is forbidden. In XHTML, the element must be closed with a trailing slash as just shown. Developers may include a space character before the slash for backward compatibility with older browsers.

Specifications

  • HTML 4.01
  • HTML5

alt=

Values: text
Required. Specifies a short description of the image that is displayed when the image file is not available.

coords=

Values: values
Specifies a list of comma-separated pixel coordinates that define a "hot" area of an image map.

href=

Values: URI
Specifies the location of the document or resource that is accessed by clicking on the defined area.

hreflang=

Values: language code
HTML5 only. Specifies the language of the target document.

media=

Values: all | aural | braille | handheld | print | projection | screen | tty | tv
HTML5 only. Describes the media (e.g., screen, handheld, speech, print, etc.) for which the target document was designed. The default is all.

nohref

Values: None in HTML. nohref="nohref" in XHTML
Not in HTML5. Defines a "mouse-sensitive" area in an image map for which there is no action when the user clicks in the area.

ping=

Values: URLs
HTML5 only. Specifies a list of URLs that have to be contacted when the link is followed, useful for user tracking.

rel=

Values: relationships
HTML5 only. Establishes one or more relationships between the current document and the target document in a space-separated list. Relationships include: alternate, archives, author, bookmark, external, first, help, index, last, license, next, nofollow, noreferrer, prev, search, sidebar, tag, and up.

shape=

Values: rect | circle | poly | default
Defines the shape of the clickable area.

target=

Values: text
Specifies the name of the window or frame in which the target document should be displayed.

type=

Values: MIME type
Specifies the media or content type (MIME type) of the linked content—for example, text/html.
HTML

<img src="map_image.png" width="250" height="150" usemap="#sample">

<map name="sample" id="sample">
<area shape="rect" coords="21,13,100,135" href="one.html">
<area shape="circle" coords="180,72,46" href="two.html">
</map>

XHTML
<img src="map_image.png" width="250" height="150" usemap="#sample" />

<map name="sample" id="sample">
<area shape="rect" coords="21,13,100,135" href="one.html" />
<area shape="circle" coords="180,72,46" href="two.html" />
</map>

Rendered example



This image demonstrates the clickable areas created by the sample area elements, but it is not a working image map.