References

Beginner-friendly references for web development, with live, editable examples.

The HTML usemap attribute

Attribute All modern browsers Updated
Quick answer

The HTML usemap attribute associates the element with a client-side image <map> by its name. It is used on the <img> and <object> elements.

Overview

The usemap attribute associates the element with a client-side image <map> by its name. It applies to the <img> and <object> elements.

Image maps are valid but rarely the best tool today — overlaid links or SVG are usually more flexible and accessible.

Syntax

<img src="map.png" usemap="#planets" alt=""><map name="planets"> … </map>

Values

Value
A hash-prefixed map name, e.g. #planets.

Best practices

  • Always give an <img> meaningful alt text (or empty alt="" if purely decorative).
  • Set width and height (or a CSS aspect-ratio) so the layout does not shift as images load.
  • Use srcset and sizes to serve appropriately sized images on each screen.
  • Add loading="lazy" to below-the-fold images.

Frequently asked questions

What does the usemap attribute do?
Links an image to a client-side image map.
How do I make images responsive?
Use srcset with sizes on the <img>, or a <picture> for art direction and modern formats.
How do I stop images causing layout shift?
Set the width and height attributes (or a CSS aspect-ratio) so the space is reserved.
Which elements use the usemap attribute?
It is an element-specific attribute, used on the <img> element (and <picture>).
type (object) value