## Example

`

    <img src="map.png" width="480" height="320" alt="Map" usemap="#mymap">

    <map name="mymap">
      <area shape="rect" coords="0,0,50,50" href="left.html" alt="Left">
      <area shape="rect" coords="50,0,100,50" href="right.html" alt="Right">
    </map>

`

## Description

The <`area`> tag is used within the <`map`> tag to define the clickable "hot spot" areas of a client-side image map.

Note: This is an empty element; it has no closing tag. In XHTML documents, the `<area />` syntax is recommended.

- HTML4
- H4-FRAMES
- H4-STRICT
- X-TRANS
- X-FRAMES
- X-STRICT
- HTML5

## Attributes Table

Attribute | Description | Values
--- | --- | ---
Element Attributes
alt | alternate text for area |
coords | the pixel coordinates of the area |
href | destination URL |
hreflang | language of destination URL |
media | media type of destination URL |
nohref | if present, area doesn't link to anything |
rel | relationship of target document to this one | alternate archives author bookmark external first help index last license next nofollow noreferrer prefetch prev search sidebar tag up
shape | shape of area defined by coords | circle default poly rect
target | where to open destination URL | _blank _parent _self _top
type | MIME type of destination URL |
Standard Attributes
accesskey | defines a key used to focus the element
class | class of this element
contenteditable | whether element is user editable
contextmenu | specifies a menu that corresponds to this element
dir | text direction
draggable | whether element is draggable
hidden | whether element should be displayed
id | unique identifier for this element
itemprop | defines a microdata property of the element in the item.
itemscope | creates a microdata group for the element
lang | language used within element
spellcheck | whether spellchecking is enabled for this element
style | CSS styling rules
subject | associates a microdata property with a non-parent item
tabindex | defines tab key navigation ordering for the element
title | title of this element
translate | whether translation tools should translate the element's content
xml:lang | language used within element

## DOM Reference

Handler | Description
--- | ---
Event Handlers
onchange | run when an element changes
onclick | run when element is clicked
oncontextmenu | run when contextual menu is triggered
ondblclick | run when element is double-clicked
ondrag | run when element is dragged
ondragend | run at end of a drag operation
ondragenter | run when element has been dragged to a valid drop target
ondragleave | run when element leaves a valid drop target
ondragover | run while element is over a valid drop target
ondragstart | run at start of drag operation
ondrop | run when dragged element is dropped
onfocus | run when element receives focus
onformchange | run when form changes
onforminput | run when form gets input
oninput | run when element gets user input
oninvalid | run when element is invalid
onkeydown | run when a key gets pressed
onkeypress | run when a key gets pressed then released
onkeyup | run when a pressed key is released
onmousedown | run when mouse button gets pressed
onmousemove | run when the mouse pointer moves
onmouseout | run when the mouse pointer leaves the element
onmouseover | run when the mouse pointer enters the element
onmouseup | run when a pressed mouse button is released
onmousewheel | run when the mouse wheel is used
onreset | run when a form reset is performed
onscroll | run when element is being scrolled
onselect | run when element is selected
onsubmit | run when form is submitted
Media Event Handlers
onabort | run when media resource loading is aborted
oncanplay | run when media can start to play
oncanplaythrough | run when media can be played completely to its end
ondurationchange | run when duration of media has changed
onemptied | run when a media resource becomes empty
onended | run when media playback reaches end
onerror | run when an error occurs during element loading
onloadeddata | run when media resource is loaded
onloadedmetadata | run when media metadata is loaded
onloadstart | run when media resource has started to load
onpause | run when media resource is paused
onplay | run when media resource will start playing
onplaying | run when media resource is playing
onprogress | run when browser has received additional media resource data
onratechange | run when media resource playback rate changes
onreadystatechange | run when media resource ready state changes
onseeked | run after media resource seeking operation has been performed
onseeking | run during media resource seeking operation
onstalled | run when media resource loading has stalled
onsuspend | run when browser stops fetching media resource before finished
ontimeupdate | run when media resource playback position changes
onvolumechange | run when media resource volume is changed or muted
onwaiting | run when media resource has stopped playing but expects to resume