W3Schools.com

HTML5 <map> 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" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The <map> tag is supported in all major browsers.

Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

Differences Between HTML 4.01 and HTML5

Note: In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.

Attributes

Attribute Value Description
name mapname Required. Specifies the name of an image-map

Global Attributes

The <map> tag also supports the Global Attributes in HTML5.

Event Attributes

The <map> tag also supports the Event Attributes in HTML5.

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE