HTML: <map> tag
In this series of learning HTML, we will teach you how to use an HTML map tag with proper syntax and lots of examples. Let’s start on the HTML map tag.
Description of HTML map tag
The HTML <map>
tag is used in conjunction with the <area>
tag to define an image map, which is a clickable image with defined regions that link to specific web pages or execute specific actions.
The <map>
tag is used to define the image map and must be used in combination with the <img>
tag. The <map>
tag specifies the name of the map, and the <area>
tag defines the clickable regions and the corresponding links.
Here’s an example of using the <map>
tag to define an image map:
<img src="example.jpg" alt="Example Image" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,50,50" href="page1.html" alt="Page 1">
<area shape="rect" coords="50,0,100,50" href="page2.html" alt="Page 2">
<area shape="rect" coords="0,50,50,100" href="page3.html" alt="Page 3">
<area shape="rect" coords="50,50,100,100" href="page4.html" alt="Page 4">
</map>
In this example, the <img>
tag is used to display an image, and the usemap
attribute specifies the name of the map to use. The <map>
tag defines the map with the name “examplemap”, and the <area>
tags define the clickable regions and the corresponding links.
The shape
attribute of the <area>
tag specifies the shape of the clickable region, which can be “rect” (rectangle), “circle”, or “poly” (polygon). The coords
attribute specifies the coordinates of the region, and the href
attribute specifies the URL to link to. The alt
attribute specifies alternative text that is displayed when the image cannot be loaded or when the user hovers over the region.
Using the <map>
tag allows for more interactive and visually appealing web pages, as images can be turned into clickable maps that link to specific pages or actions.
Syntax to use HTML map tag
The HTML <map>
tag is used to define an image map for an <img>
element. An image map is a way to associate different parts of an image with different hyperlinks or actions. Here is the basic syntax of the <map>
tag:
<img src="image.png" usemap="#mapname">
<map name="mapname">
<!-- map definition goes here -->
</map>
In this syntax, the src
attribute of the <img>
element specifies the URL of the image that the map is associated with. The usemap
attribute specifies the name of the <map>
element using a hash symbol followed by the name of the map. The <map>
element contains the definition of the map.
Within the <map>
element, you can use the <area>
tag to define clickable areas of the image. The <area>
tag has several attributes that specify the shape and coordinates of the clickable area, as well as the action or hyperlink associated with it. Here is an example of how to define an image map using the <map>
and <area>
tags:
<img src="worldmap.png" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="https://en.wikipedia.org/wiki/North_America">
<area shape="rect" coords="100,0,200,100" href="https://en.wikipedia.org/wiki/South_America">
<area shape="rect" coords="0,100,100,200" href="https://en.wikipedia.org/wiki/Europe">
<area shape="rect" coords="100,100,200,200" href="https://en.wikipedia.org/wiki/Africa">
</map>
In this example, an image map is defined for a world map image using the <map>
and <area>
tags. Each <area>
tag defines a rectangular clickable area of the image and the href
the attribute specifies the hyperlink associated with it.
Overall, the <map>
tag is a useful way to create interactive and clickable images in HTML, and it can be styled using CSS to customize the appearance of the clickable areas.
Global Attributes
The <map>
tag in HTML is used in conjunction with the <area>
tag to create an image map. Image maps allow you to define clickable areas on an image, which can be linked to different pages or parts of a website.
The <map>
tag has several global attributes that can be used to modify its behavior:
name
: Specifies a name for the map. This name is used to associate the<map>
element with the<img>
element that uses it.class
: Specifies one or more class names for the map. This attribute can be used to apply CSS styles to the map.id
: Specifies a unique ID for the map. This attribute can be used to target the map with JavaScript.style
: Specifies inline styles for the map.title
: Specifies a title for the map. This attribute is used to provide additional information about the map.tabindex
: Specifies the order in which the map is accessed using the keyboard. This attribute is used to improve accessibility for users who navigate using the keyboard.
These global attributes can be applied to many other HTML elements as well, not just the <map>
tag.
Event Attributes
In HTML, event attributes can be added to elements to define JavaScript code that is executed when a specific event occurs. Here are some common event attributes that can be used with the <map>
tag:
onclick
: Specifies a function to be executed when the user clicks on the map.onmouseover
: Specifies a function to be executed when the user moves the mouse over the map.onmouseout
: Specifies a function to be executed when the user moves the mouse away from the map.onfocus
: Specifies a function to be executed when the map receives focus (i.e. is selected using the keyboard).onblur
: Specifies a function to be executed when the map loses focus.
These event attributes can be used to add interactivity to your image map, such as displaying tooltips or highlighting the clickable areas. However, it’s important to use these attributes sparingly and to make sure they don’t interfere with the accessibility of your website. For example, if you use the onclick
attribute, you should also make sure that the same action can be performed using the keyboard.
Other Attributes
In addition to global and event attributes, the <map>
tag in HTML also supports several other attributes that are specific to its functionality as an image map:
alt
: Specifies alternative text that should be displayed if the image cannot be loaded or if the user is using a screen reader. This attribute is required for accessibility purposes.coords
: Specifies the coordinates of the clickable area(s) in the image. The values are relative to the top-left corner of the image and depend on the shape of the clickable area (e.g. for a rectangle, the value should be “left,top,right,bottom”).shape
: Specifies the shape of the clickable area(s) in the image. The possible values are “rect” (for rectangles), “circle” (for circles), and “poly” (for polygons).target
: Specifies the name of the frame or window where the linked document should be displayed. This attribute is used in conjunction with the<area>
tag to specify the target of the link.
These attributes are specific to the functionality of image maps and are not used in other HTML elements. When using the <map>
tag and the associated <area>
tags, it’s important to use these attributes correctly to ensure that your image map is accessible and functions correctly.
Notes on HTML map tag
Here are some important notes to keep in mind when using the <map>
tag in HTML:
- Accessibility: When creating an image map, it’s important to provide alternative text using the
alt
attribute and to ensure that the map is accessible to users who rely on assistive technology, such as screen readers. - Validity: Make sure your
<map>
and<area>
tags are placed within an<img>
tag, and that theusemap
attribute of the<img>
tag points to the name of the<map>
tag. This will ensure that your HTML code is valid and that the image map works as expected. - Coordination: The
coords
attribute specifies the coordinates of the clickable area(s) in the image, and theshape
attribute specifies the shape of the clickable area(s). Make sure these attributes are set correctly to ensure that your clickable areas are accurate and easy to use. - Cross-browser compatibility: Some older browsers may not support image maps or may handle them differently. Test your image map in different browsers to ensure that it works correctly for all users.
- Performance: Image maps can sometimes slow down page loading times, especially if the image is large or if there are many clickable areas. Consider using other techniques, such as CSS, to achieve the same functionality if performance is a concern
Browser Compatibility
The HTML map tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML map tag
We will discuss the <map> tag below, exploring examples of how to use the <map> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML 4.01 Transitional Document
If you created a new web page in HTML 4.01 Transitional, your <map> tag might look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map">
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html">
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html">
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html">
</map>
</body>
</html>
The main difference between this example and the HTML5 example is the DOCTYPE
declaration at the top of the document, which specifies that the document is using HTML 4.01 Transitional instead of HTML5.
Aside from that, the map
and area
tags work the same way in HTML 4.01 Transitional as they do in HTML5. We define the clickable areas within the image using the area
tag, and specify their shape and position using the shape
and coords
attributes.
We also include the usemap
attribute on the img
tag to specify that the image should use the map defined by the map
tag with the name example-map
.
Note that the syntax of the map
and area
tags is slightly different in HTML 4.01 Transitional compared to HTML5. Specifically, we don’t use the self-closing syntax (<tag />
) for the area
tag, and we don’t include a closing </map>
tag.
XHTML 1.0 Transitional Document
If you created a new web page in XHTML 1.0 Transitional, your <map> tag might look like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map" />
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html" />
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html" />
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html" />
</map>
</body>
</html>
In this example, we’re using an XHTML 1.0 Transitional document, which means that the syntax is stricter than HTML 4.01 Transitional. Specifically, we need to close all tags, including the img
and area
tags, and we need to include the xmlns
attribute on the html
tag.
Aside from those differences, the map
and area
tags work the same way in XHTML as they do in HTML 4.01 and HTML5. We define the clickable areas within the image using the area
tag, and specify their shape and position using the shape
and coords
attributes.
We also include the usemap
attribute on the img
tag to specify that the image should use the map defined by the map
tag with the name example-map
.
Note that the syntax of the img
, map
, and area
tags is slightly different in XHTML compared to HTML 4.01 and HTML5, but the functionality of the map
tag remains the same.
XHTML 1.0 Strict Document
If you created a new web page in XHTML 1.0 Strict, your <map> tag might look like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map" />
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html" />
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html" />
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html" />
</map>
</body>
</html>
In this example, we’re using an XHTML 1.0 Strict document, which means that the syntax is even stricter than XHTML 1.0 Transitional. Specifically, we can’t use deprecated elements and attributes, and we need to include a DOCTYPE
declaration and the xmlns
attribute on the html
tag.
Aside from those differences, the map
and area
tags work the same way in XHTML as they do in HTML 4.01 and HTML5. We define the clickable areas within the image using the area
tag, and specify their shape and position using the shape
and coords
attributes.
We also include the usemap
attribute on the img
tag to specify that the image should use the map defined by the map
tag with the name example-map
.
Note that the syntax of the img
, map
, and area
tags is slightly different in XHTML compared to HTML 4.01 and HTML5, but the functionality of the map
tag remains the same.
XHTML 1.1 Document
If you created a new web page in XHTML 1.1, your <map> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 1.1 Map Example</title>
</head>
<body>
<h1>XHTML 1.1 Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#exampleMap" />
<map name="exampleMap">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html" alt="Link to Page 1" />
<area shape="rect" coords="100,0,200,100" href="http://www.example.com/page2.html" alt="Link to Page 2" />
<area shape="rect" coords="200,0,300,100" href="http://www.example.com/page3.html" alt="Link to Page 3" />
</map>
</body>
</html>
In this example, we have an image called “example.jpg” that we want to add clickable links to. We use the map
tag to define the clickable areas on the image. The name
attribute of the map
tag is used to associate it with the image, which is done by setting the usemap
attribute of the img
tag to “#exampleMap” (where “exampleMap” is the value of the name
attribute).
Inside the map
tag, we define the clickable areas using the area
tag. Each area
tag has a shape
attribute (which defines the shape of the clickable area) and a coords
attribute (which specifies the coordinates of the area). In this example, we’re using rectangular areas with coordinates that define three separate links on the image. Each area
tag also has an href
attribute that specifies the URL to link to, and an alt
attribute that provides alternative text for the link (which is read by screen readers and other assistive technologies).
This example is written in XHTML 1.1, which is a stricter version of HTML that requires all elements to be properly nested and closed. Note the use of the self-closing syntax for the img
tag, which is required in XHTML.