HTML5 Reference

HTML <area> tag

Definition

The <area> tag is a self closing tag used within the <map></map> element to define the clickable areas.

Example


<p>Click on an object in the picture to interact with it.</p>
<img src="https://server2client.com/images/enhancedimagesmall.jpg"
     alt="interaction" 
     width="300" 
     height="200" 
     usemap="#lesson3">
<map id="lesson3" name="lesson3">
  <area shape="rect"
        alt="paper"
        coords="10,10,156,190" 
        href="javascript:alert('blank sheet of paper');">
  <area shape="circle"
        alt="apple"
        coords="235,45,50" 
        href="https://server2client.com/pages/apple.html">
  <area shape="circle"
        alt="tomato"
        coords="230,145,25" 
        href="https://server2client.com/pages/tomato.html">
</map>

Click on an object in the picture to interact with it.

interaction paper apple tomato

Attributes

The following attributes can be used with the <area> tag.


<area> Specific Attributes
Attribute Value Description Example
alttextSpecifies an alternate text for the map area. Required if the href attribute is present.

<area href="../images/apple.jpg" alt="apple pie">
coordscoordinatesSpecifies the coordinates of the area.
Should be only be in conjunction with the shape attribute.

<area href="../images/apple.jpg" alt="apple pie"
      coords="0,0,12,15" shape="rect">
downloadfilenameSpecifies the target resource to download when an area is clicked.

<area href="../images/apple.jpg" alt="apple pie"
      download="resource.fileExt">
hrefURLSpecifies the target URL or resource to link to.

<a href="../images/apple.jpg" alt="apple pie">
hreflanglanguage_codeSpecifies the language of target URL to link to.
Should be only be used when the href attribute is present.

<area href="../images/apple.jpg" alt="apple pie"
      hreflang="en"> 
rel



alternate

author

bookmark

help

license


next


nofollow


noreferrer


prefetch

prev


search


tag
Specifies a space-separated list of relationships between the current resource and destination URL.
Should be only be used when the href attribute is present.

Alternative representation of current document.

Link to author of this document.

Gives a permalink for the nearest ancestor.

Link to a help document for current context.

Referenced document provides the copyright license terms for current document.

Indicates that the document is part of a sequence, and that the link to the referenced document is next.

Indicates that the link is not endorsed by the original author or publisher of the page.

Indicates that no referrer information is to be leaked when following the link.

Specifies target document should be cached.

Indicates that the document is part of a sequence, and that the link to the referenced document is previous.

Specifies that referenced document provides an interface specifically for searching the document and its related resources.

Specifies a tag that applies to the current document.

<area href="../images/apple.jpg" alt="apple pie"
      rel="nofollow"> 
shapecircle

poly

rect

Defaults to whole area
Specifies the coordinates of the area.
Should be only be in conjunction with the coords attribute.

<area href="../images/apple.jpg" alt="apple pie"
      coords="0,0,12,15" shape="rect">
target

_blank

_parent

_self (default)

_top

framename
Specifies where to open the linked resource.

Opens linked document in new window or tab

Opens linked document in parent frame.

Opens linked document in same frame as it was clicked in.

Opens linked document in window body.

Opens the linked document in a named framename.

<area href="../images/apple.jpg" alt="apple pie"
      target="_blank"> 
typeMIME-typeSpecifies MIME type of the linked resource.
Should only be used when the href attribute is present.

<area href="../images/apple.jpg" alt="apple pie"
      type="text/html"> 
<area> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content.

<area href="../images/apple.jpg"
      alt="apple pie" class="name"> 
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content.

<area href="../images/apple.jpg"
      alt="apple pie" id="idname">
styleSpecifies an inline style for the element allowing you to apply the style to the contentt.

<area href="../images/apple.jpg"
      alt="apple pie" style="color:red;"> 
titleSpecifies an inline style for the element allowing you to apply the style to the content.

<area href="../images/apple.jpg"
      alt="apple pie" title="Content info."> 
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element.

<area href="../images/apple.jpg"
      alt="apple pie" accesskey="a"> 
tabindexSpecifies a tab order for the element.

<area href="../images/apple.jpg"
      alt="apple pie" tabindex="1">
Language
dirSpecifies the directional flow of the content.

<!-- The text will flow from left to right -->
<area href="../images/apple.jpg"
      alt="apple pie" dir="ltr">
<!-- The text will flow from right to left -->
<area href="../images/apple.jpg"
      alt="apple pie" dir="rtl">
langSpecifies a language code for the content of the element.

<area href="../images/apple.jpg"
      alt="apple pie" lang="en">
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt.

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<area href="../images/apple.jpg"
      alt="apple pie" spellcheck="true"> 
translateSpecifies an inline style for the element allowing you to apply the style to the content.

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<area href="../images/apple.jpg"
      alt="apple pie" translate="no">
Miscellaneous
contenteditableSpecifies whether the content of the element is editable.

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<area href="../images/apple.jpg"
      alt="apple pie" contenteditable="false"> 
draggableSpecifies whether the element is draggable.

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<area href="../images/apple.jpg"
      alt="apple pie" draggable="true"> 
hiddenSpecifies whether the element is not yet, or no longer, relevant.

<!-- Valid values an empty string or hidden -->
<area href="../images/apple.jpg"
      alt="apple pie" hidden> 
<area href="../images/apple.jpg"
      alt="apple pie" hidden="hidden"> 
<area> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oncopy="go()"> 
oncutThe script to be run when the user cuts the content of an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oncut="go()">
onpasteThe script to be run when the user pastes some content into an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onpaste="go()">
Drag and Drop
ondragThe script to be run when an element is dragged.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondrag="go()">
ondragendThe script to be run when an element has stopped being dragged.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondragend="go()">
ondragenterThe script to be run when an element has been dragged to a valid drop target.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondragenter="go()">
ondragleaveThe script to be run when an element leaves a valid drop target.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondragleave="go()">
ondragoverThe script to be run when an element is being dragged over a valid drop target.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondragover="go()">
ondragstartThe script to be run at the start of a drag operation.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondragstart="go()">
ondropThe script to be run when a dragged element is being dropped.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondrop="go()">
Form
onblurThe script to be run when the element loses focus.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onblur="go()">
onchangeThe script to be run when object changed and attempt to leave field.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onchange="go()">
oncontextmenuThe script to be run when a context menu is triggered.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oncontextmenu="go()">
onfocusThe script to be run when the element gets focus.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onfocus="go()">
oninputThe script to be run when an element gets user input.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oninput="go()">
oninvalidThe script to be run when an element is invalid.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oninvalid="go()">
onresetThe script to be run when a dragged element is being dropped.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onreset="go()">
onselectThe script to be run when some or all of the contents of an object are selected.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onselect="go()">
onsubmitThe script to be run when a form is submitted.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onsubmit="go()">
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onkeydown="go()">
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onkeypress="go()">
onkeyupThe script to be run when an element is in focus and keyboard key is released.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onkeyup="go()">
Media
onabortThe script code to be run on abort.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onabort="go()">
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oncanplay="go()">
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oncanplaythrough="go()">
oncuechangeThe script to be run when the cue changes when using the track element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" oncuechange="go()">
ondurationchangeThe script to be run when the length of the media is changed.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondurationchange="go()">
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onemptied="go()">
onendedThe script to be run when the media has reach the end.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onended="go()">
onloadeddataThe script to be run when media data is loaded and playback can start.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onloadeddata="go()">
onloadedmetadataThe script to be run when metadata has been loaded.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onloadedmetadata="go()">
onloadstartThe script to be run when the media resource has started loading.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onloadstart="go()">
onpauseThe script to be run when the media resource has been paused.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onpause="go()">
onplayThe script to be run when the media resource starts playback.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onplay="go()">
onplayingThe script to be run when playback has already begun.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onplaying="go()">
onprogressThe script to be run when the browser is fetching the media data.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onprogress="go()">
onratechangeThe script to be run when the playback rate changes.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onratechange="go()">
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onseeked="go()">
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onseeking="go()">
onstalledThe script to be run when the browser is unable to continue fetching media data.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onstalled="go()">
onsuspendThe script to be run when media data has stopped before being completely loaded.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onsuspend="go()">
ontimeupdateThe script to be run when the media resources current playback position has changed.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ontimeupdate="go()">
onvolumechangeThe script to be run when the volume has changed or been muted.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onvolumechange="go()">
onwaitingThe script to be run when the media resource has paused but is expected to resume.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onwaiting="go()">
Mouse
onclickThe script to be run when when a mouse is clicked on an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onclick="go()">
ondblclickThe script to be run when a mouse is double clicked on an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" ondblclick="go()">
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onmousedown="go()">
onmousemoveThe script to be run when the mouse button is moved.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onmousemove="go()">
onmouseoutThe script to be run when the mouse cursor moves off an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onmouseout="go()">
onmouseoverThe script to be run when the mouse cursor moves over an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onmouseover="go()">
onmouseupThe script to be run when the mouse button is released while the cursor is over the element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onmouseup="go()">
onwheelThe script to be run when the mouse wheel rolls up or down over an element.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onwheel="go()">
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled.

 <!-- Executes go() function -->
<area href="../images/apple.jpg"
      alt="apple pie" onscroll="go()"> 
Scroll
Window - NONE

Relevant HTML Tutorials

HTML Advanced - Image Maps