HTML 5 <area> Tag
Example
An image-map, with clickable areas:
<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map> |
Try it yourself » |
Definition and Usage
The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).
The area element is always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with
the map
element's name attribute, and creates a relationship between the image and the 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.
Attributes
| Attribute |
Value |
Description |
| alt |
text |
Specifies an alternate text for the area. Required if the
href attribute is present. Use ONLY if the href attribute is present. |
| coords |
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" |
Specifies the coordinates for the clickable area |
| href |
URL |
Specifies the target URL of the area |
| hreflang |
language_code |
Specifies the base language of the target URL. Use only if
the href attribute is present |
| media |
media query |
Specifies the mediatype of the target URL. Default value:
all. Use only if the href attribute is present |
| ping |
URL |
Space separated list of URL's that gets notified when a user follows the
hyperlink. Use only if the href attribute is present |
| 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 |
| shape |
rect
rectangle
circ
circle
poly
polygon |
Defines the shape of the area |
| target |
_blank
_parent
_self
_top |
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
|
| type |
mime_type |
Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.
Use only if the href attribute is present |
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.
The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
|
