HTML <map> Tag for Image Maps

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <map> Tag in HTML 5

An HTML image map is dynamic interactive content that sets up image areas that a user can click on to navigate to other pages. If there is only one link for the entire image, an <a href> tag (hypertext link) with image should be used instead.

To see how an image map works, mouse over or click on the different areas of this image map:

HTML 5 sections HTML <header> Tag HTML <nav> Tag HTML <section> Tag HTML <article> Tag HTML <aside> Tag HTML <footer> Tag

This is an actual working demo of the <map> tag example code below.


<map> Tag Syntax

Rules for coding HTML map elements

<map> Tag Attributes

Attributes of the <map> tag
global attributes In addition to the personal attributes of the <map> tag below, any of the common HTML attributes can also be coded.

<map> Tag Examples

Examples of the map tag in HTML 5

The first <area coords> that match determines the area element that is used. Therefore when areas overlap, the code for the area on top must come before the code for the area below it. For example, in the <map> tag demo above, the area element for the "<section>" area on the image must come before the area element for the "<article>" area.


Changes in HTML 5 - <map> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the map element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5