HTML Tag: area

A region of a client-side image map. Used in conjunction with map to map links to certain regions of an image.

Required Attributes

  • alt is used to specify the alternative text of the area, which should be a short description.

Optional Attributes

  • shape can be used to specify the shape of the area. The value can be rect (rectangular), circle (circular), poly (polygonal) or default.
  • coords can be used to specify the pixel coordinates of the area. For rectangular shapes, this is a comma-separated list of four values for left, top, right and bottom (eg. coords="0,0,50,50"). For circular shapes this is a comma-separated list of three values for left, top and radius (eg. coords="50,50,25"). For polygonal shapes, this is a comma-separated list containing an even number of values, specifying the left and top of each point of the shape (eg. coords="0,0,25,25,50,25,50,100").
  • href can be used to specify the target of the area link.
  • nohref can be used to specify that the area is not a link. It must be used in the format nohref="nohref".
  • accesskey can be used to associate a keyboard shortcut to the area.
  • tabindex can be used to specify where the area appears in the tab order of the page.
  • Common attributes

Example

<map id ="atlas">
	<area shape ="rect" coords ="0,0,115,90" href ="northamerica.html" alt="North America" />
	<area shape ="poly" coords ="113,39,187,21,180,72,141,77,117,86" href ="europe.html" alt="Europe" />
	<area shape ="poly" coords ="119,80,162,82,175,102,183,102,175,148,122,146" href ="africa.html" alt="Africa" />
</map>

Changes in HTML5

  • None.

Related Tags