HTML Area tag

Example An image map, with clickable areas: <img src ="planets.gif" width="145" height="126" ...


An image map, with clickable areas:
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

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

Definition and Usage

The <area> tag defines a region in an image map.
The area element is always nested inside a <map> tag.

Browser Support

The <area> tag is supported in all major browsers.

Differences Between HTML and XHTML

In HTML the <area> tag has no end tag.
In XHTML the <area> tag must be properly closed.

Tips and Notes

Note: The usemap attribute in the <img> tag refers to the id or name (browser dependant) attribute in <map>, therefore we have added both the id and name attributes to <map>.

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
alt text Specifies an alternate text for the area STF

Optional Attributes

Attribute Value Description DTD
coords if shape="rect" then
if shape="circ" then
if shape="poly" then
Specifies the coordinates for the clickable area STF
href URL Specifies the target URL of the area STF
nohref true
Excludes an area from the image map STF
shape rect
Defines the shape of the area STF
target _blank
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

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

Best Online Tutorials | Source codes | Programming Languages: HTML Area tag
HTML Area tag
Best Online Tutorials | Source codes | Programming Languages
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content