jump

HTML 5: The Markup Language (ARIA Edition)

areaimage-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 contents #

empty (void element)

Permitted attributes #

global attributes
Any attributes permitted globally.
alt = any value #
The fallback content for the image map.
href = URL potentially surrounded by spaces #
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.
Any string that is either of the following:
rel = set of space-separated 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.
A valid media query list as defined in [Media Queries].
hreflang = language tag NEW #
The language of the destination of the hyperlink.
A valid language tag as defined in [BCP 47].
type = MIME type #
The MIME type of the destination of the hyperlink.
A string that identifies a valid MIME media type as defined in [RFC 2046].
shape = d:string "rect" & coords = rectangle coordinates # #
Specifies that the shape of the area of this hyperlink on the image map is a rectangle.
A comma-separated list of four integers, in exactly the following order:
  1. an integer representing the distance in CSS pixels from the left edge of the image to the left side of the rectangle
  2. an integer representing the distance in CSS pixels from the top edge of the image to the top side of the rectangle
  3. an integer, greater than the value of the first integer in this list, representing the distance in CSS pixels from the left edge of the image to the right side of the rectangle
  4. an integer, greater than the value of the second integer in this list, representing the distance in CSS pixels from the top edge of the image to the bottom side of the rectangle
shape = d:string "circle" & coords = circle coordinates # #
Specifies that the shape of the area of this hyperlink on the image map is a circle.
A comma-separated list of three numbers, in exactly the following order:
  1. an integer representing the distance in CSS pixels from the left edge of the image to the center of the circle
  2. an integer representing the distance in CSS pixels from the top edge of the image to the center of the circle
  3. a non-negative integer, representing the radius of the circle, in CSS pixels
shape = d:string "poly" & coords = polygon coordinates # #
Specifies that the shape of the area of this hyperlink on the image map is a polygon.
A comma-separated list of at least six integers, with the total number of integers in the list being even (that is, six or eight or ten numbers, and so on). Each pair of integers represents a coordinate, in CSS pixels, given as the distances from, respectively, the left and the top of the image; all the coordinates together represent the points of the polygon, in order.
shape = d:string "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 #

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; }