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.
Table of contents
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.
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">
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">
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.