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.
|
