DEV Community

Mohammed Salah
Mohammed Salah

Posted on

The <map> Tag in HTML

The Tag in HTML

The tag in HTML is used to define an image map. An image map is a way of defining multiple clickable areas (regions) within a single image. Each of these clickable areas can be associated with different links or actions.

How It Works

The tag is used in conjunction with the tag to define these clickable regions. The tag itself does not display any content; it simply provides a container for the tags that define the clickable regions.
Here’s a step-by-step breakdown of how to use the tag:

  • Define the Image: You first need an image to apply the map to. Use the tag for this.
  • Define the Map: Use the tag to define the map and give it a unique name using the name attribute.
  • Define the Clickable Areas: Inside the tag, use the tags to define the clickable regions. Each tag uses attributes to specify the shape, coordinates, and link for each region.

Image description

Attributes

  • name (required): Specifies the name of the map. This name is referenced by the usemap attribute in the tag.
  • shape (in ): Defines the shape of the clickable area. Possible values are rect (rectangle), circle (circle), and poly (polygon).
  • coords (in ): Specifies the coordinates that define the shape of the clickable area. The format of the coordinates depends on the shape: rect: "x1,y1,x2,y2" circle: "x,y,radius" poly: "x1,y1,x2,y2,x3,y3,..."
  • href (in ): Defines the URL to which the user will be redirected when they click the area.
  • alt (in ): Provides alternative text for the clickable area, useful for accessibility.

Use Cases

Image maps are useful when you want to create interactive images, such as:

  • Geographic maps where each region links to a different page.
  • Interactive diagrams where each part of the diagram links to more detailed information.
  • Any scenario where multiple links are needed within a single image.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs