From http://www.w3schools.com (Copyright Refsnes Data)

HTML 5 <area> tag

Definition and Usage

The <area> tag defines a region in an image map.

Differences Between HTML 4.01 and HTML 5

HTML 5 has some new attributes, and some HTML 4.01 attributes are no longer supported.

Tips and Notes

This element is always nested inside a <map> tag.

Example

Source Output
<p>Click on one of the planets:</p>

<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />

<map id ="planetmap">
  <area shape ="rect" coords ="0,0,82,126"
  href ="sun.htm" target ="_blank"
  alt="Sun" />
  <area shape ="circle" coords ="90,58,3"
  href ="mercur.htm" target ="_blank"
  alt="Mercury" />
  <area shape ="circle" coords ="124,58,8"
  href ="venus.htm" target ="_blank"
  alt="Venus" />
</map>

Click on one of the planets:

Planets Sun Mercury Venus

Attributes

Attribute Description Value 4 5
alt Specifies an alternate text for the area. Required if the alt attribute is present. Use ONLY if the alt attribute is present. text 4 5
coords Specifies the coordinates for the clickable area

if shape="rect" then
coords="left,top,right,bottom"

if shape="circ" then
coords="centerx,centery,radius"

if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"

 4 5
href Specifies the target URL of the area URL 4 5
hreflang Specifies the base language of the target URL. Use only if the href attribute is present language_code 4 5
nohref true
false		 Deprecated. Excludes an area from the image map 4  
media media query Specifies the mediatype of the target URL. Default value: all. Use only if the href attribute is present   5
ping Space separated list of URL's that gets notified when a user follows the hyperlink. Use only if the href attribute is present URL   5
rel alternate
archives
author
bookmark
contact
external
feed
first
help
icon
index
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
stylesheet
sidebar
tag
up		 Specifies the relationship between the current document and the target URL. Use only if the href attribute is present   5
shape Defines the shape of the area rect
rectangle
circ
circle
poly
polygon		 4 5
target Where to open the target URL.
  • _blank - the target URL will open in a new window
  • _self - the target URL will open in the same frame as it was clicked
  • _parent - the target URL will open in the parent frameset
  • _top - the target URL will open in the full body of the window
 _blank
_parent
_self
_top		 4 5
type mime_type Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL. Use only if the href attribute is present   5

Standard Attributes

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

For a full description, go to Standard Attributes in HTML 5.

Event Attributes

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

For a full description, go to Event Attributes in HTML 5.

Try-It-Yourself Demos

Create an image map
How to create an image map, with clickable regions. Each region is a hyperlink.

From http://www.w3schools.com (Copyright Refsnes Data)