area element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The area element defines a section or area in an image map. Image maps allow authors to define sections in an image and, optionally, convert them into hyperlinks pointing to other resources. In other words, image maps make it possible to create a link out of one or more sections of the image (img) they're associated with.

Four types of shapes can be defined for each area of the image map, by declaring any of the values listed below in the shape attribute. The coords attribute must provide the coordinates of the shape in a way specific to each type of area.

  • default: the entire area of the map. The coords attribute isn't needed.
  • rect: a renctangular region. The coords attribute must provide two oposite corners "left-x, top-y, right-x, bottom-y".
  • circle: a circular region. The coords attribute must provide the center and the radius "center-x, center-y, radius". If the radius is measured in percentage, its calculated as relative to the smaller size of the associated object.
  • poly: the area encolsed inside a polygon. The coords attribute must provide, one by one, the coordinates of the edges "x1, y1, x2, y2, ..., xn, yn". If they define an open polygon, the browser should close it by adding a segment between the first edge and the last one.

In previous versions of the standard, authors could also define image map areas with the a element. In HTML5 only the area element provides this functionality.

The area element can only have a map element as parent. It can't be declared as child of any other element.

In HTML5, the alt attribute is mandatory when the alt attribute is present and must be ommited otherwise. It's also required to specify the corrdinates for the shape (in the coords attribute) if a "default" shape hasn't been chosen.

Examples

In the example below, we'll create an image map and we'll associate it to the image. Inside of it, we'll insert two areas (area), one circular and the other rectangular, that will cover the elements we see in the image (a circle and a pice of text). This will allow the user to follow the link by clicking only the desired areas of the image, and not in the entire image.

Next to this text, you'll also find an image with the schematics of the areas that will be specified in the following example. They appear visible in this image for better understanding.

<map name="image-map-1">
  <area href="../../tutorials.html" alt="HTML tutorials" shape="circle" coords="67,73,47">
  <area href="../../tutorials.html" alt="HTML tutorials" shape="rect" coords="82,78,156,99">
</map>
<img src="/assets/images/image-map-1-en.png" usemap="#image-map-1" alt="Example image map">
HTML tutorials HTML tutorials Example image map

A couple of things to note in this example: first, the values in the shape and coords attributes of the area elements are describing exactly the needed areas; and second, the values of the name attribute in the map and the usemap attribute in the image, matching (except for the required hash sign).

Attributes

Specific attributes

alt

A textual equivalent version of the content/purpose of this element.

This attribute provides useful textual alternatives that can become vital for people with disabilities or poor technologies. Using the alt attribute wherever possible is a good practice for improving accessibility.

In HTML5, this attribute is required if the href attribute is present and must be ommited otherwise. Authors should provide it with a brief but accurate description of the element's purpose, except when there's another area pointing to the same resource with a proper alt attribute defined.

Example

<area href="document1.html" alt="First document" shape="circle" coords="40, 40, 30">

shape

The form of the shape used to define an area in an image map. The values this attribute can take are the following (case-insensitive):

  • default: the entire area of the map.
  • rect: a renctangular region.
  • circle: a circular region.
  • poly: the area encolsed inside a polygon.

Example

<area href="document1.html" alt="First document" shape="circle" coords="40, 40, 30">
<area href="document2.html" alt="Second document" shape="rect" coords="10, 80, 90, 170">
<area href="document3.html" alt="Third document" shape="poly" coords="10, 180, 10, 210, 15, 195">

coords

The coordinates defining size and position of a shape in an image map. It's used together with the shape attribute, and the coordinates it should provide depend on the type of shape. In any case, the values are always separated by a comma:

  • rect: two oposite corners "left-x, top-y, right-x, bottom-y".
  • circle: the center and the radius "center-x, center-y, radius". If the radius is measured in percentage, its calculated as relative to the smaller size of the associated object.
  • poly: one by one, the coordinates of the edges "x1, y1, x2, y2, ..., xn, yn". If they define an open polygon, the browser should close it by adding a segment between the first edge and the last one.

This attribute must only be specified when the area element is defining a rectangle, a circle or a poligon. When the shape attribute isn't present or it takes the default value, this attribute must be omitted.

Example

<area href="document1.html" alt="First document" shape="circle" coords="40, 40, 30">
<area href="document2.html" alt="Second document" shape="rect" coords="10, 80, 90, 170">
<area href="document3.html" alt="Third document" shape="poly" coords="10, 180, 10, 210, 15, 195">

href

The address (represented by a URI) for the linked resource. This is the attribute that turns the area into a hyperlink and its absence makes the element define a "dead area" in the image map.

Example

<area alt="First document" shape="circle" coords="50, 50, 30">

target

A value specifiyng where the destination document should be open. This value can be a browsing-context name (like the value of the name attribute of a iframe) or any of the following values (case-insensitive):

  • _blank: the link will open in a new window.
  • _parent: the link will open in the immediate parent context.
  • _self: the link will open in the same context that's containing the link.
  • _top: the link will open in the topmost context (the greatest parent context containing the link).

The target attribute was deprecated in previous versions of HTML, but it's been reinstated in HTML5 as it becomes useful in combination with the iframe element.

Example

<area href="document1.html" target="_blank" alt="First document (opens in new window)" shape="rect" coords="10, 80, 90, 170">

download

A boolean value indicating if the linked resource should be downloaded to the user filesystem or open in the browser. If present, the browser will download the linked resource when the link is activated. Additionally, authors can specify as value of this attribute, a suggested name for saving the file on disk.

When choosing a value for this attribute, authors must be aware that most filesystems have restrictions that prevent the use of certain characters in the names of files.

Example

<map name="image-map-1">
  <area href="../../tutorials.html" alt="HTML tutorials" shape="circle" coords="67,73,47" download="html-tutorials.html">
  <area href="../../tutorials.html" alt="HTML tutorials" shape="rect" coords="82,78,156,99" download="html-tutorials.html">
</map>
<img src="/assets/images/image-map-1-en.png" usemap="#image-map-1" alt="Example image map">
HTML tutorials HTML tutorials Example image map

ping

A list of space-separated URLs the browser should ping (request or navigate) when the link is activated. This attribute is useful when there's a need to collect statistical information about hyperlinks.

Browsers may completely ignore this attribute upon user request. Authors shouldn't rely completely in the results taken with this method of auditing links.

Example

<area href="/articles/clean-energy.html" alt="Article on Clean Energy" shape="circle" coords="50,50,20" ping="/audit.php?page=article-clean-energy&link=5">

rel

An unordered set of unique space-separated list of link types, indicating the meaning that the linked resource has for the current document (the one containing the link). This attribute may take the following values:

  • alternate: an alternate representation for the current document.
  • author: a link to the author of the current document or article.
  • bookmark: the permalink for the nearest ancestor section.
  • external: the referenced document is not part of the same site as the current document.
  • help: a link to context-sensitive help.
  • license: a description of a copyright license that covers the main content of the current document.
  • next: the next document in a series of documents.
  • nofollow: the current document's original author or publisher does not endorse the referenced document.
  • noreferrer: the browser shouldn't send a referrer if the link is followed.
  • noopener: any browsing context created by following the hyperlink will disown its opener.
  • prev: the previous document in a series of documents.
  • search: a link to a resource that can be used to search through the current document and its related pages.
  • tag: a tag (identified by the given address) that applies to the current document.

Example

<area rel="next" href="document2.html" alt="Second document" shape="circle" coords="40, 40, 30">
<area rel="copyright" href="copyright.html" alt="Copyright information" shape="rect" coords="10, 80, 90, 170">
<area rel="alternate" href="es/document1.html" alt="First document (spanish version)" shape="poly" coords="10, 180, 10, 210, 15, 195">

referrerpolicy

Sets the referrer policy used when processing the element's attributes, which involves what information is sent about the referrer in a request to another resource. It may contain any of the following values:

  • no-referrer: No information about the referrer is sent in all requests.
  • no-referrer-when-downgrade: A full URL is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • same-origin: A full URL is sent only in requests made in the same origin.
  • origin: A URL composed by protocol, host and port is sent in all requests.
  • strict-origin: A URL composed by protocol, host and port is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests.
  • strict-origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests, only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • unsafe-url: A full URL is sent in all request.

Note: When this attribute takes the empty string, the value no-referrer is assumed.

Example

<area rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">

hreflang

A language tag identifying the language that's expected to be used in the liked resource.

This attribute has become obsolete for this element in HTML5 due to the lack of implementation by users and browsers. Its use is no longer valid.

Example

<area hreflang="es-ES" href="es/document1.html" alt="First document (spanish version)" shape="rect" coords="10, 80, 90, 170">

type

The content type (or Internet Media Type) that the linked resource is expected to have. The defaut value is "all".

This attribute has become obsolete for this element in HTML5 due to the lack of implementation by users and browsers. Its use is no longer valid.

Example

<area href="article.html" type="text/html" alt="Main article" shape="circle" coords="40, 40, 30">
<area href="picture.jpg" type="image/jpeg" alt="Author's picture" shape="rect" coords="10, 80, 90, 170">

nohref

A boolean value indicating if this area sets a hyperlink. The presence of this attribute in the element indicates that the area isn't defining a link.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors can define areas without a hyperlink by simply not declaring the href attribute.

Example

<area nohref shape="rect" coords="10, 80, 90, 170">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.