Tutor:The <map> tag defines an image map - a clickable area on an image. It's used with the <area> tag to create clickable regions. The map needs a 'name' attribute, and the image uses 'usemap' to reference it.

⭐ 0 EXP

Interactive Map Tag Tutorial Steps

Step 1

The <map> tag defines an image map - a clickable area on an image. It's used with the <area> tag to create clickable regions. The map needs a 'name' attribute, and the image uses 'usemap' to reference it.

<map

Step 2

The <map> tag contains one or more <area> elements that define clickable regions. Each <area> has shape (rect, circle, poly), coords (coordinates), and href (link). The image uses usemap='#mapname' to connect to the map.

<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="page1.html">
</map>

Step 3

Common use cases: interactive diagrams, clickable maps, navigation menus with images, and educational content. The name attribute on <map> must match the usemap value on the image (without the #).

<img src="worldmap.jpg" usemap="#world">
<map name="world">
  <area shape="rect" coords="100,50,200,150" href="europe.html" alt="Europe">
</map>

Step 4

In the browser, clicking different areas of the image triggers different links or actions. Each <area> defines a clickable region with its own href and alt text for accessibility.

<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="page1.html">
</map>

Step 5

Checkpoint: Which element defines clickable areas within a map?

<map name="mymap">
  <area shape="rect" coords="0,0,100,100" href="link.html">
</map>

Step 6

Correct! The <area> tag defines clickable areas within a <map>. Each <area> specifies a shape, coordinates, and link destination.

<map name="mymap">
  <area shape="rect" coords="0,0,100,100" href="link.html">
</map>

Step 7

Now it's your turn. Image maps create interactive clickable images. Complete the challenges below to master the <map> tag!

Map Mastery

Unlock nodes by learning map and area structure.

Concept 1: The Map Tag

The <map> tag defines an image map - a clickable area on an image. It's used with the <area> tag to create clickable regions. The map needs a name attribute, and the image uses usemap to reference it.

System Check

Which element defines clickable areas within a map?

Community Holo-Net

Share Image Maps

Created interactive image maps with clickable areas? Share your code snippets and best practices with fellow developers.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Comprehensive Guide to the HTML <map> Tag

Pascual Vila

Frontend Instructor & Developer

What is the HTML Map Tag?

The HTML <map> tag is specifically designed to define an image map. An image map allows developers to take a single image and create multiple clickable regions on it, seamlessly linking different areas of the same picture to different web pages or actions.

How to Structure Map and Area Tags

The <map> element acts as a container. Inside it, you place one or multiple <area> elements. Every area defines a separate interactive shape.

shape: Specifies the geometry of the clickable area (options include rect, circle, or poly).
coords: The precise pixel coordinates that draw the shape.
href: The hyperlink target when a user clicks the specified area.

Connecting an Image to a Map

To make the image map functional, the <map> tag requires a unique name attribute. You must then connect the <img> element to the map using the usemap attribute, prefacing the map's name with a hash symbol (#). For example: linking name="worldMap" directly pairs with an image declaring usemap="#worldMap".

SEO and Accessibility Best Practices

Generative engines and search crawlers evaluate accessibility. You must always include a descriptive alt attribute for every <area> tag so screen readers can interpret the destination. Furthermore, verify that the coordinate logic gracefully handles responsive layouts, as static pixel coordinates on resized images can misalign clickable regions.

Technical Glossary: Image Maps

<map>: The core HTML container element that defines the image map. Requires a valid name attribute.
<area>: A void HTML element representing a geometric clickable region nested inside a map. Requires shape, coordinates, and destination logic.
usemap: An attribute placed on the <img> tag pointing to the hash-prefixed name of the corresponding map element.
Coordinate Systems: Values defining region geometry: rect (x1,y1,x2,y2), circle (x,y,radius), and poly (x1,y1,x2,y2...xn,yn).

📖 INDEX