HTML Tags

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:

HTML:<area alt="text">; XHTML:<area alt="text" />

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.

<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
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
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
rect
circle
poly
Specifies the shape of the associated hot spot.
target _blank
_parent
_self
_top
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.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 2+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: HTML Links.

Related tag: <img>, <map>.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties