HTML5: area / map

area – image-map hyperlink ⓘ # T

The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

Permitted content #

empty (void element)

Permitted attributes #

common attributes & alt★ & href★ & target & rel & media & hreflang & type & shape="rect" & coords★ or shape="circle"★ & coords★ or shape="poly"★ & coords★ or shape="default"

Descriptions for attributes specific to this element #

alt = normal character data

The fallback content for the image map.

href = URI

A URL that provides the destination of the hyperlink for this area.

target = browsing-context name or keyword

A name or keyword giving a browsing context for UAs to use when following the hyperlink for this area.

rel = tokens NEW

A list of tokens that specify the relationship between the document containing the area and the destination indicated by the area.

media = media-query list NEW

The media for which the destination of the hyperlink was designed.

hreflang = language tag NEW

The language of the destination of the hyperlink.

type = MIME type

The MIME type of the destination of the hyperlink.

shape = "rect" & coords = rectangle

Specifies that the shape of the area of this hyperlink on the image map is a rectangle.

shape = "circle" & coords = circle

Specifies that the shape of the area of this hyperlink on the image map is a circle.

shape = "poly" & coords = polygon

Specifies that the shape of the area of this hyperlink on the image map is a polygon.

shape = "default"

Specifies that the shape of the area of this hyperlink on the image map is a rectangle that exactly covers the entire image.

Additional constraints and admonitions #

• The area element must have an ancestor map element.
• The nohref attribute on the area element is obsolete. Omitting the href attribute is sufficient.

Tag omission #

The area element is a void element. An area element must have a start tag but must not have an end tag.

Permitted parent elements #

any element that can contain phrasing elements

DOM interface #

interface HTMLAreaElement : HTMLElement {
attribute DOMString alt;
attribute DOMString coords;
attribute DOMString shape;
stringifier attribute DOMString href;
attribute DOMString target;
attribute DOMString rel;
readonly attribute DOMTokenList relList;
attribute DOMString media;
attribute DOMString hreflang;
attribute DOMString type;

// URL decomposition IDL attributes
attribute DOMString protocol;
attribute DOMString host;
attribute DOMString hostname;
attribute DOMString port;
attribute DOMString pathname;
attribute DOMString search;
attribute DOMString hash;
};

Typical default display properties #

area {

display: none; }

Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The map element contains a number of area elements, that defines the clickable areas in the image map.

Tips and Notes
Note: The area element is always nested inside the map element. The area element defines the regions in the image map.

---

Attributes

Attribute	Value	Description
name	unique name	Defines a unique name for the map tag, so it can be referred to.

Standard Attributes

The <map> tag also supports the Standard Attributes in HTML 5.

---

Event Attributes

The <map> tag also supports the Event Attributes in HTML 5.