HTML <area> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <area> tag defines a hot-spot region on an image, and associates it with a hypertext link. This element is used only within a <map> element.
The following table summarizes the usages context and the version history of this tag.
| Parent: | <map> |
|---|---|
| Content: | None. It is an empty element. |
| Start/End Tag: | Start tag: required, End tag: forbidden |
| Version: | HTML 2, 3.2, 4, 4.01, 5 |
Syntax
The basic syntax of the <area> tag is given with:
Note: In HTML, the end tag for the <area> tag is forbidden. In XHTML, the <area> tag must be closed with a trailing slash, like this: <area />. See empty elements.
The example below shows the <area> tag in action.
Example
Try this code »<img src="shapes.png" usemap="#shapes" alt="Geometrical Shapes">
<map name="shapes">
<area shape="circle" coords="40,40,40" href="circle.html" alt="Circle">
<area shape="poly" coords="148,2,104,80,193,80" href="triangle.html" alt="Triangle">
<area shape="rect" coords="226,2,323,80" href="rectangle.html" alt="Rectangle">
<area shape="poly" coords="392,2,352,32,366,80,418,80,432,32" href="pentagon.html" alt="Pentagon">
</map>Tag-Specific Attributes
The following table shows the attributes that are specific to the <area> tag.
| Attribute | Value | Description |
|---|---|---|
| Required — The following attribute must be specified on this tag for the markup to be valid. | ||
alt |
text | Specifies replacement text to use when the images defined by the area elements are not available. |
| Optional — The following attributes are optional. | ||
coords |
coordinates | Specifying the coordinates of the hot-spot region. |
download |
filename | Specifies whether to download the linked resource instead of navigating to it, when the user clicks on the link. |
href |
URL | Specifies the hyperlink target for the area. |
hreflang |
langcode | Specifies the language of the linked resource. This attribute may only be used when href is specified. |
media |
media-query | Specifies the media for which the linked resource is designed. |
nohref |
nohref |
Obsolete Specifies that no hyperlink exists for the associated area. |
rel |
alternate |
Specifies the relationship of the linked resource to the current document. This attribute should be used only if the href attribute is present. |
shape |
default |
Specifies the shape of the associated hot spot. |
target |
_blank |
Specifies where to display the linked resource specified in the href attribute. |
type |
content-type | Specifies the content type (MIME type) of the linked content–for example, "image/jpeg", "text/html" etc. |
Global Attributes
Like all other HTML tags, the <area> tag supports the global attributes in HTML5.
Event Attributes
The <area> tag also supports the event attributes in HTML5.
Browser Compatibility
The <area> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Links.
