If you find this helpful, please click the Google 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.) |
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:
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.