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> |
View it » |
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
New : New in HTML 5.
| 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 |
| hreflangNew |
language_code |
Specifies the base language of the target URL. Use only if
the href attribute is present |
| mediaNew |
media query |
Specifies the mediatype of the target URL. Default value:
all. Use only if the href attribute is present |
| nohref |
nohref |
Not supported in HTML 5. |
| pingNew |
URL |
Space separated list of URL's that gets notified when a user follows the
hyperlink. Use only if the href attribute is present |
| relNew |
alternate
archives
author
bookmark
contact
external
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
|
| typeNew |
mime_type |
Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.
Use only if the href attribute is present |
Standard Attributes
The <a> tag also supports the Standard Attributes in HTML 5.
Event Attributes
The <a> tag also supports the Event Attributes
in HTML 5.
|
