Categories
Learn HTML

HTML: area tag

HTML: <area> tag

In this series of learning HTML, we will teach you how to use HTML area tag with proper syntax and lots of examples. Let’s start on the HTML area tag.

Description of HTML area tag

The HTML <area> tag defines a specific area within an image map that is clickable and links to another resource. It is used in conjunction with the <map> tag to define an image map.

The <area> tag has several attributes, including:

  • shape: specifies the shape of the clickable area (rectangular, circular, or polygonal).
  • coords: specifies the coordinates of the clickable area. The format of the coordinates depends on the shape attribute.
  • href: specifies the URL of the resource to link to.
  • alt: specifies alternative text for the area, which is displayed when the image cannot be loaded or when the user hovers over the area with their cursor.
  • target: specifies the target frame or window in which to open the linked resource.

Here is an example of how to use the <area> tag:

<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" alt="Example Link">
</map>

In this example, an image is displayed and an image map is defined using the <map> tag. The <area> tag is used to define a rectangular clickable area within the image map. When the user clicks on this area, they will be taken to the URL specified in the href attribute.

Syntax of HTML area tag

The HTML <area> tag is used to define a clickable area within an image map. The syntax of the <area> tag is as follows:

<area shape="shape" coords="coordinates" href="URL">

Here, the shape attribute is used to specify the shape of the clickable area, which can be rect for a rectangular shape, circle for a circular shape, or poly for a polygonal shape. The coords attribute is used to specify the coordinates of the clickable area, depending on the shape. The href attribute is used to specify the URL to be opened when the clickable area is clicked.

Example:

<img src="map.png" alt="Image map" usemap="#map">

<map name="map">
<area shape="rect" coords="0,0,50,50" href="page1.html">
<area shape="circle" coords="100,100,50" href="page2.html">
<area shape="poly" coords="150,150,200,200,150,200" href="page3.html">
</map>

In this example, the <img> element contains an image with an associated image map. The image map is defined using the <map> tag, and three clickable areas are defined using the <area> tag. The first area is rectangular, the second area is circular, and the third area is polygonal. When a user clicks on any of the clickable areas, the corresponding URL is opened.

 

Global Attributes

The <area> tag in HTML is used in conjunction with an <img> element to define a clickable area within an image map. The <area> tag has the following global attributes:

  1. alt: Specifies an alternate text for the area, which is displayed when the image cannot be loaded or is unavailable.
  2. coords: Specifies the coordinates of the area in the image map. The format of the coordinates depends on the shape of the area, such as rectangular or circular.
  3. download: Specifies that the target resource should be downloaded when the area is clicked, rather than displayed in the browser.
  4. href: Specifies the URL of the target resource that will be displayed or downloaded when the area is clicked.
  5. hreflang: Specifies the language of the target resource.
  6. media: Specifies the media type or query for the target resource.
  7. referrerpolicy: Specifies the policy for sending the referrer when the area is clicked.
  8. rel: Specifies the relationship between the current document and the target resource.
  9. shape: Specifies the shape of the clickable area, such as rect, circle, or poly.
  10. target: Specifies the target window or frame where the target resource will be displayed or downloaded when the area is clicked.
  11. type: Specifies the MIME type of the target resource.

Event Attributes

The <area> tag in HTML is used in conjunction with an <img> element to define a clickable area within an image map. The <area> tag does not have any specific event attributes, but it can be used with JavaScript to respond to user interactions, such as clicks or mouseovers.

Here are some common event attributes that can be used with the <area> tag in JavaScript:

  1. onclick: Triggers a function when the user clicks on the area.
  2. ondblclick: Triggers a function when the user double-clicks on the area.
  3. onmousedown: Triggers a function when the user presses down on the mouse button while the mouse pointer is over the area.
  4. onmouseup: Triggers a function when the user releases the mouse button while the mouse pointer is over the area.
  5. onmousemove: Triggers a function when the user moves the mouse pointer over the area.
  6. onmouseover: Triggers a function when the user moves the mouse pointer onto the area.
  7. onmouseout: Triggers a function when the user moves the mouse pointer off of the area.

Note that these event attributes can also be used with other HTML elements, and they are not specific to the <area> tag.

Other Attributes

In addition to global attributes and event attributes, the <area> tag in HTML also supports some specific attributes that are unique to this tag. These attributes are used to define the properties of the clickable area and its target. Here are some of the commonly used attributes:

  1. alt: Specifies an alternate text for the area, which is displayed when the image cannot be loaded or is unavailable.
  2. coords: Specifies the coordinates of the area in the image map. The format of the coordinates depends on the shape of the area, such as rectangular or circular.
  3. download: Specifies that the target resource should be downloaded when the area is clicked, rather than displayed in the browser.
  4. href: Specifies the URL of the target resource that will be displayed or downloaded when the area is clicked.
  5. hreflang: Specifies the language of the target resource.
  6. media: Specifies the media type or query for the target resource.
  7. referrerpolicy: Specifies the policy for sending the referrer when the area is clicked.
  8. rel: Specifies the relationship between the current document and the target resource.
  9. shape: Specifies the shape of the clickable area, such as rect, circle, or poly.
  10. target: Specifies the target window or frame where the target resource will be displayed or downloaded when the area is clicked.
  11. type: Specifies the MIME type of the target resource.

It’s important to note that the <area> tag must always be used in conjunction with an <img> tag to define the image map. The <img> tag specifies the image that will be used for the map, and the <area> tag defines the clickable areas within the image.

Notes on HTML area tag

Here are some important notes on the HTML <area> tag:

  1. The <area> tag is used in conjunction with the <img> tag to define an image map, which is a way to define clickable areas within an image.
  2. The <area> tag is used to define the clickable areas within the image map. Each <area> tag must have a shape attribute that specifies the shape of the clickable area, and a coords attribute that specifies the coordinates of the area.
  3. The shape attribute can have one of three values: rect (for rectangular areas), circle (for circular areas), or poly (for polygons).
  4. The coords attribute specifies the coordinates of the clickable area. The format of the coordinates depends on the shape of the area. For rectangular areas, the coords attribute should be in the format x1,y1,x2,y2, where x1 and y1 are the coordinates of the upper-left corner of the rectangle, and x2 and y2 are the coordinates of the lower-right corner. For circular areas, the coords attribute should be in the format x,y,r, where x and y are the coordinates of the center of the circle, and r is the radius of the circle. For polygons, the coords attribute should be a comma-separated list of x,y coordinate pairs that define the vertices of the polygon.
  5. Each <area> tag should have either an href attribute or a hreflang attribute to specify the target URL of the clickable area. The href attribute specifies the target URL, and the hreflang attribute specifies the language of the target URL.
  6. The <area> tag can also have other attributes such as alt, target, rel, and title that provide additional information about the clickable area.
  7. The <area> tag does not have any specific event attributes, but it can be used with JavaScript to respond to user interactions, such as clicks or mouseovers.
  8. Image maps created using the <area> tag are not supported in some older browsers, and may not be accessible to users who rely on assistive technologies such as screen readers. It’s important to provide alternative navigation options for users who cannot use image maps.

Browser Compatibility

The HTML area tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML area tag

We will discuss the <area> tag below, exploring examples of how to use the <area> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML area tag below, with some examples of how to use the area tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

HTML5 Document

here’s an example of how to use the HTML5 <area> tag to create an image map:

<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<p>Click on the different parts of the image to learn more:</p>
<img src="map.png" alt="Map of Example City" usemap="#examplemap">

<map name="examplemap">
<area shape="rect" coords="100,100,200,200" href="landmarks.html#bridge" alt="Golden Gate Bridge">
<area shape="circle" coords="300,150,50" href="landmarks.html#tower" alt="Transamerica Pyramid">
<area shape="poly" coords="400,50,500,150,300,200,200,100" href="landmarks.html#building" alt="Empire State Building">
</map>
</body>
</html>

In this example, we have an <img> tag that displays a map of a city. We have also defined an image map using the <map> tag, and given it a name of “examplemap”. Inside the <map> tag, we have three <area> tags that define the clickable areas on the map.

The first <area> tag has a shape attribute of “rect”, which means it defines a rectangular clickable area. The coords attribute specifies the coordinates of the upper-left and lower-right corners of the rectangle. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

The second <area> tag has a shape attribute of “circle”, which means it defines a circular clickable area. The coords attribute specifies the coordinates of the center of the circle and the radius. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

The third <area> tag has a shape attribute of “poly”, which means it defines a polygonal clickable area. The coords attribute specifies the coordinates of the vertices of the polygon. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

When the user clicks on one of the clickable areas, they will be taken to the corresponding URL. The alt attribute of each <area> tag provides alternative text that will be displayed if the image cannot be loaded or is unavailable, and the title attribute can provide additional information about the clickable area that will be displayed when the user hovers over it.

 

HTML 4.01 Transitional Document

here’s an example of how to use the HTML 4.01 Transitional <area> tag to create an image map:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<p>Click on the different parts of the image to learn more:</p>
<img src="map.png" alt="Map of Example City" usemap="#examplemap">

<map name="examplemap">
<area shape="rect" coords="100,100,200,200" href="landmarks.html#bridge" alt="Golden Gate Bridge">
<area shape="circle" coords="300,150,50" href="landmarks.html#tower" alt="Transamerica Pyramid">
<area shape="poly" coords="400,50,500,150,300,200,200,100" href="landmarks.html#building" alt="Empire State Building">
</map>
</body>
</html>

This example is very similar to the HTML5 example I provided earlier. The main differences are in the DOCTYPE declaration and the lack of support for some of the newer HTML5 features like the data-* attributes.

In this example, we have an <img> tag that displays a map of a city. We have also defined an image map using the <map> tag, and given it a name of “examplemap”. Inside the <map> tag, we have three <area> tags that define the clickable areas on the map.

The first <area> tag has a shape attribute of “rect”, which means it defines a rectangular clickable area. The coords attribute specifies the coordinates of the upper-left and lower-right corners of the rectangle. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

The second <area> tag has a shape attribute of “circle”, which means it defines a circular clickable area. The coords attribute specifies the coordinates of the center of the circle and the radius. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

The third <area> tag has a shape attribute of “poly”, which means it defines a polygonal clickable area. The coords attribute specifies the coordinates of the vertices of the polygon. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

When the user clicks on one of the clickable areas, they will be taken to the corresponding URL. The alt attribute of each <area> tag provides alternative text that will be displayed if the image cannot be loaded or is unavailable, and the title attribute can provide additional information about the clickable area that will be displayed when the user hovers over it.

 

 

 

XHTML 1.0 Transitional Document

Here’s an example of how to use the XHTML 1.0 Transitional <area> tag to create an image map:

<?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>
<p>Click on the different parts of the image to learn more:</p>
<img src="map.png" alt="Map of Example City" usemap="#examplemap" />

<map name="examplemap">
<area shape="rect" coords="100,100,200,200" href="landmarks.html#bridge" alt="Golden Gate Bridge" />
<area shape="circle" coords="300,150,50" href="landmarks.html#tower" alt="Transamerica Pyramid" />
<area shape="poly" coords="400,50,500,150,300,200,200,100" href="landmarks.html#building" alt="Empire State Building" />
</map>
</body>
</html>

This example is similar to the HTML5 and HTML 4.01 Transitional examples I provided earlier. The main differences are in the DOCTYPE declaration and the use of self-closing tags.

In this example, we have an <img> tag that displays a map of a city. We have also defined an image map using the <map> tag, and given it a name of “examplemap”. Inside the <map> tag, we have three <area> tags that define the clickable areas on the map.

The first <area> tag has a shape attribute of “rect”, which means it defines a rectangular clickable area. The coords attribute specifies the coordinates of the upper-left and lower-right corners of the rectangle. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

The second <area> tag has a shape attribute of “circle”, which means it defines a circular clickable area. The coords attribute specifies the coordinates of the center of the circle and the radius. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

The third <area> tag has a shape attribute of “poly”, which means it defines a polygonal clickable area. The coords attribute specifies the coordinates of the vertices of the polygon. The href attribute specifies the URL of the page that should be loaded when the user clicks on this area.

When the user clicks on one of the clickable areas, they will be taken to the corresponding URL. The alt attribute of each <area> tag provides alternative text that will be displayed if the image cannot be loaded or is unavailable, and the title attribute can provide additional information about the clickable area that will be displayed when the user hovers over it.

 

 

 

XHTML 1.0 Strict Document

Here’s an example of how to use the XHTML 1.0 Strict <area> tag to create an image map:

<?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>
<p>Click on the different parts of the image to learn more:</p>
<img src="map.png" alt="Map of Example City" usemap="#examplemap" />

<map id="examplemap" name="examplemap">
<area shape="rect" coords="100,100,200,200" href="landmarks.html#bridge" alt="Golden Gate Bridge" />
<area shape="circle" coords="300,150,50" href="landmarks.html#tower" alt="Transamerica Pyramid" />
<area shape="poly" coords="400,50,500,150,300,200,200,100" href="landmarks.html#building" alt="Empire State Building" />
</map>
</body>
</html>

This example is similar to the previous examples, but with some changes to comply with the stricter rules of the XHTML 1.0 Strict doctype. For example, the id attribute has been added to the <map> tag, which is not required in HTML5 or HTML 4.01 Transitional, but is required in XHTML 1.0 Strict.

In this example, we have an <img> tag that displays a map of a city. We have also defined an image map using the <map> tag, and given it both an id and a name of “examplemap”. Inside the <map> tag, we have three <area> tags that define the clickable areas on the map.

The <area> tags are similar to the previous examples, with shape, coords, href, alt, and title attributes that define the clickable area’s shape, coordinates, link destination, alternative text, and title text, respectively.

When the user clicks on one of the clickable areas, they will be taken to the corresponding URL. The alt attribute of each <area> tag provides alternative text that will be displayed if the image cannot be loaded or is unavailable, and the title attribute can provide additional information about the clickable area that will be displayed when the user hovers over it.

Note that in XHTML, all tags must be closed, either with a closing tag or with a self-closing tag. Therefore, the <img> tag and the <area> tags are closed with self-closing tags (i.e., they end with /> instead of >).

 

 

XHTML 1.1 Document

Here’s an example of how to use the XHTML 1.1 <area> tag to create an image map:

<?xml version="1.0" encoding="UTF-8"?>
<!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>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<p>Click on the different parts of the image to learn more:</p>
<img src="map.png" alt="Map of Example City" usemap="#examplemap" />

<map id="examplemap" name="examplemap">
<area shape="rect" coords="100,100,200,200" href="landmarks.html#bridge" alt="Golden Gate Bridge" />
<area shape="circle" coords="300,150,50" href="landmarks.html#tower" alt="Transamerica Pyramid" />
<area shape="poly" coords="400,50,500,150,300,200,200,100" href="landmarks.html#building" alt="Empire State Building" />
</map>
</body>
</html>

This example is similar to the previous examples, but with some changes to comply with the rules of the XHTML 1.1 doctype. For example, the XHTML 1.1 doctype is different from the XHTML 1.0 doctype, and the id attribute is still required on the <map> tag.

In this example, we have an <img> tag that displays a map of a city. We have also defined an image map using the <map> tag, and given it both an id and a name of “examplemap”. Inside the <map> tag, we have three <area> tags that define the clickable areas on the map.

The <area> tags are similar to the previous examples, with shape, coords, href, alt, and title attributes that define the clickable area’s shape, coordinates, link destination, alternative text, and title text, respectively.

When the user clicks on one of the clickable areas, they will be taken to the corresponding URL. The alt attribute of each <area> tag provides alternative text that will be displayed if the image cannot be loaded or is unavailable, and the title attribute can provide additional information about the clickable area that will be displayed when the user hovers over it.

Note that in XHTML, all tags must be closed, either with a closing tag or with a self-closing tag. Therefore, the <img> tag and the <area> tags are closed with self-closing tags (i.e., they end with /> instead of >). Additionally, all attributes must be in lowercase in XHTML 1.1.