HTML 5 area tag

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:

## Attributes

- 4: indicates if the attribute is defined in HTML 4.01
- 5: indicates if the attribute is defined in HTML 5

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)