The <map> tag is used to specify an image-map, with active areas, where you can click to get more information. The clickable areas in the image map are defined using the <area> tag, nested in the <map> tag.
The <map> tag is used to connect the <img> tag with a client-side image-map, which means that the browser is responsible for the code interpreting and the image map rendering. To create a relationship between the image and the map, the required name attribute is used with the <map> tag, and usemap attribute with the <img> tag.
Syntax
The <map> tag comes in pairs. The content is written between the opening (<map>) and closing (</map>) tags.
Example of the HTML <map> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo items to watch it closer:</p>
<img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png" width="145" height="126" alt="block" usemap="#blockmap">
<map name="blockmap">
<area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html">
<area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic">
<area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html">
</map>
</body>
</html>Attributes
| Attributes | Value | Description |
|---|---|---|
| name | mapname | Sets the name of an image-map. |
The <map> element also uses the Global Attributes.
Browser support
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.