W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

area intro area browser display area parents area coordinates for shapes area syntaxarea href alt attributesarea coords attributearea download attributearea hreflang attributearea rel attributearea shape attributearea target attributearea type attribute

HTML5 area element

The area element allows you to mark up areas on an image map; the areas can be hyperlinked; it is used together with the map element. »video

About area

Display & support area

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, area

Attributes area


Shapes and their coordinates: how to

Adding coordinates for each type of shape »video

Syntax area

1<area> »video

Attributes and Values area (comma separated)

<areaattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.alt=text» video<area href="area1.php" alt="area 1">
2.coords=number»video<area shape="circle" coords="76, 189, 56" >
3.download=string»video<area href="x.php" alt="x" download="x.php">
4.href=URL»video<area href="area1.php" alt="area 1">
5.hreflang=language code»video<area href="region1.php" alt="region 1" hreflang="fr">
6.rel=alternate, author, bookmark, help
license, next, nofollow, noreferrer
prefetch, prev, search, sidebar, tag
»details<area href="help.php" alt="help" rel="help">
7.shape=circle, poly, rect, default»video<area shape="circle" coords="76, 189, 56" >
8.target=_blank, _self, _parent, _top,
a valid browsing-context name
»video<area href="area1.php" alt="area 1" target="_blank">
9.type=MIME type»video<area href="area1.php" alt="area 1" type="text⁄html">
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<area accesskey="h">
2.class=class name»html »img<area class="class_name">
3.contenteditable="",  , true, false »html<area contenteditable="true">
4.contextmenu=menu id value»html<area contextmenu="menu_id_value">
5.data-*= value -<area data-http-error="404">
6.dir=ltr, rtl, auto»html<area dir="ltr">
7.draggable= true,  , false»img<area draggable="false">
8.dropzone= copy, move, link, string:, file: -<area dropzone="copy">
9.hidden= "",  , hidden»html »img<area hidden="hidden">
10.id=id name»html »img<area id="unique_id_name">
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<area lang="en">
17.spellcheck="",  , true, false»html<area spellcheck="true">
18.style=CSS property:value»html »img<area style="color:red">
19.tabindex= integer »img<area tabindex="3">
20.title=text»html »link»style »abbr»dfn
»img »meter
<area title="html page">
21.translate="", yes, no»html »img<area translate="yes">
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration area element

HTML5 area and map elements Tutorial

min video details
00:05 map element server rendering client-side image maps
00:12 map element must have area elements as children which allow you to define through its attributes: different shapes (4: circ, poly, rect, default), their coordinates, their destination link
00:32 map element must have a name attribute whose value is used as value of the usemap attribute on img element, preceded by #
00:44 this is how you connect an img element to a map element
00:50 when the img element and the map element are connected, these coordinates refer to a circular area on this image
00:59 these coordinates refer to a rectangular area on this image
01:06 these coordinates refer to a polygon area on this image
01:13 on this image: when we will click on the circular area, we will be taken to "round_zone.php"
01:22 when we will click on the rectangular area, we will be taken to "rectangle_zone.php"
01:28 when we will click on the polygon area, we will be taken to "polygon_zone.php"
01:35 test
01:41 test result: ok
the image is a client-side image map thanks to map element

For more information about the area element, please see the specs: W3CWHATWG