HTML 5 <area> tag
Definition and Usage
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.
 |
 |
 |
 |
|
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
 |
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
 |
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Utilize the extensive out-of-the box features or customize your site through Ektron CMS400.NET's open architecture |
 |
Promote collaboration in your organization through project workspaces where others can efficiently find information and work together |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
|
|
 |
TAKE THE VIDEO TOUR |
 |
or download a FREE TRIAL today. |
|
HOME
Printer friendly page
