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.

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.