<area>

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.

HTML Attributes

• alt = fallback content for the image map
  If the area element has a href attribute, the alt attribute must be present.
  The alt attribute may be left blank if there is another area element in the same image map that points to the same resource and has a non-blank alt attribute.

• coords = valid list of integers
  This attribute gives the coordinates for the shape described by the shape attribute. The processing for this attribute is described as part of the image map processing model.
  • In the circle state
    The area elements must have a coords attribute present, with three integers, the last of which must be non-negative.
    • distance in CSS pixels from the left edge of the image to the center of the circle
    • distance in CSS pixels from the top edge of the image to the center of the circle
    • radius of the circle

• • In the polygon state
    The area elements must have a coords attribute with at least six integers, and the number of integers must be even. Each pair of integers must represent a coordinate given as the distances from the left and the top of the image in CSS pixels respectively, and all the coordinates together must represent the points of the polygon, in order.
  • In the rectangle state
    The area elements must have a coords attribute with exactly four integers. the first of which must be less than the third, and the second of which must be less than the fourth.
    • distance from the left edge of the image to the left side of the rectangle
    • distance from the top edge to the top side
    • distance from the left edge to the right side
    • distance from the top edge to the bottom side

• shape = circle/ poly/ rect/ default
  • circle
    Circle keyword represents circle state.
  • poly
    Poly keyword represents polygon state.
  • rect
    Rect keyword represents rectangle state.
  • default
    The area is the whole image. area elements must not have a coords attribute.

• href = URL potentially surrounded by spaces
  A URL that provides the destination of the hyperlink. If the href attribute is not specified, the element represents a placeholder hyperlink.

• target = browsing-context name or keyword
  A name or keyword giving a browsing context for UAs to use when following the hyperlink.
  The target attribute on the a element was deprecated in a previous version of HTML, but is no longer deprecated, as it is useful in Web applications, particularly in combination with the iframe element.
  Any string that is either of the following:
  • a browsing-context name
  • any case-insensitive match for one of the following literal strings: "_blank", "_self", "_parent", or "_top".

• rel = set of space-separated tokens
  A list of tokens that specify the relationship between the document containing the hyperlink and the destination indicated by the hyperlink.

• hreflang = language tag
  The language of the destination of the hyperlink.
  A valid language tag, as defined in [BCP47].

• media = media-query list
  The media for which the destination of the hyperlink was designed.
  A valid media query list, as defined in [MediaQueries].

• type = MIME type
  The MIME type of the destination of the hyperlink.
  A string that identifies a valid MIME media type, as defined in [RFC2046].

See also global attributes.

Example

Example A

[try it]:

<p>
  Please select a shape:
  <img src="shapes.png" usemap="#shapes"
       alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
  <map name="shapes">
    <area shape="rect" coords="50,50,100,100"> <!-- the hole in the red box -->
    <area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box.">
    <area shape="circle" coords="200,75,50" href="green.html" alt="Green circle.">
    <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
    <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
  </map>
</p>

HTML Reference

The HTML5 specification defines the <area> element in 4.8.12 The area element.