Home  »  HTML   »   area

This tag is used in conjunction with img. Using this tag, a specific area of an image can be hyperlinked.

How To Use an area In HTML

An area tag can be used with the following attributes and their possible values.

alt

Alternative text for the area

  • Text
shape

Defines he shape for the linking area

  • rect:  Creates a rectangle. It's the default value so if the shape attribute is omitted rect will be used.
  • circle: Creates a circle shape to be linked.
  • poly: Creates multipoint polygon area to be linked.
  • default: Creates area for the entire image to be linked.
coords

Defines the (x,y) pixel coordinates of the area

  • Rectangle: coords="0,0,50,50" - list of four values should be provided for left, top, right and bottom.
  • Circle: coords="50,50,25" - list of three values that should be provided for left, top and radius.
  • Polygon: coords="0,0,25,25,50,25,50,100" - list containing an even number of values, defining the left and top of each point.
rel

It defines the relationship between the link’s page and the link’s target destination.

  • alternate: An alternative version of the page.
  • author: Details of the page author.
  • bookmark: A link to the current section of the page.
  • help: Help text for the context.
  • license: A license for the current document.
  • next: It denotes the current page is in a sequence. The linked page will be the next page in the sequence.
  • prev: It denotes the current page is in a sequence. The linked page was the previous page in the sequence.
  • nofollow: Denotes that the linked resource is not endorsed by the current document's author.
  • noreferrer: The browser will not send an HTTP referrer header when following the link.
  • prefetch: Enable pre-fetching of the linked resource.
hreflang

It defines the language of the target of the link.

  • Valid Language Codes, such as en (English) or es (Spanish).
type

MIME Type of the defined link

  • Text
target

Specifies in which context the target destination should open.

  • _self: Opens link in current window / tab.
  • _blank: Opens link in a new window / tab.

Using area to link part of the image:

Edit Example

External Resources:
https://imagemap.org/