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.
Reliable, affordable, feature-rich web hosting!
Take the uncertainty out of Web hosting and let
GoDaddy.com
put service, performance and value back in. No matter which
hosting type or plan you choose, your site receives 24/7
maintenance and protection in our world-class data center. Plus,
you get the expert, friendly service you deserve, from the
world's largest hostname provider.
With three plans to choose from and
prices starting at just $4.99 per month, GoDaddy.com is sure to have a plan that's
right-sized and right-priced just for you!
All plans feature FREE 24x7 setup, FREE 24x7 monitoring, best-
of-breed routers, firewalls and servers, 24x7 onsite physical security
and access to our exclusive Go Daddy Hosting Connection, THE place
to install over 30 FREE applications. Virtual Dedicated and Dedicated
Server plans also available.
Visit GoDaddy.com today.
Virtual Dedicated, Dedicated Server and unlimited plans also available.
Save 10% on web hosting - Enter code w3tenoff at checkout
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).
|
|
