HTML <area> Tag

The HTML <area> tag is used to define specific areas within an image map that users can click on to navigate to different links or trigger specific actions. The <area> tag works in conjunction with the <map> tag, allowing developers to create interactive images where different sections link to different web pages or perform unique functions.

By using the <area> tag, web developers can create complex, clickable image maps, improving the overall user experience by allowing multiple areas within one image to serve different purposes. The tag is particularly useful for image-based navigation and enhancing website accessibility.

Syntax of the <area> Tag

html
<area shape="shape" coords="coordinates" href="URL" alt="description">
  • shape: Specifies the shape of the clickable area (e.g., rectangle, circle, polygon).
  • coords: Specifies the coordinates that define the clickable area.
  • href: The URL that the area links to.
  • alt: Provides an alternative text description for accessibility purposes.

The <area> tag is always used within a <map> element, which links the image and the clickable areas together.

Attributes of the <area> Tag

The <area> tag supports several attributes to enhance functionality and accessibility:

AttributeDescription
altProvides alternative text for the area, which is useful for screen readers and accessibility.
coordsDefines the coordinates that determine the shape of the clickable area. Coordinates are dependent on the shape (e.g., x, y coordinates).
hrefSpecifies the URL the area will link to. This makes the defined region of the image clickable.
shapeSpecifies the shape of the clickable area. Accepts values like "rect" (rectangle), "circle" (circle), and "poly" (polygon).
targetSpecifies where to open the linked document (e.g., _blank for a new tab, _self for the same tab).
relDefines the relationship between the current document and the linked document, such as "nofollow" to prevent search engines from following links.
downloadIf present, this attribute forces the browser to download the linked resource instead of navigating to it.
global attributesSupports global attributes like class, id, lang, and style for additional styling and identification.

Examples of HTML <area> Tag

Example 1: Simple Image Map with Rectangle Area

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Map Example</title>
</head>
<body>
    <img src="example-map.jpg" alt="Example Image Map" usemap="#exampleMap">
    <map name="exampleMap">
        <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Clickable Area">
    </map>
</body>
</html>

In this example, the <area> tag is used to create a rectangular clickable area (specified by coords="34,44,270,350") within an image. When a user clicks on this region, they will be redirected to https://www.example.com.

Example 2: Image Map with Multiple Areas (Circle and Polygon)

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Interactive Image Map</title>
</head>
<body>
    <img src="map-example.jpg" alt="Interactive Map" usemap="#mapExample">
    <map name="mapExample">
        <area shape="circle" coords="150,150,50" href="https://www.example.com/circle" alt="Circle Area">
        <area shape="poly" coords="200,10,250,190,160,210" href="https://www.example.com/polygon" alt="Polygon Area">
    </map>
</body>
</html>

In this example, two clickable areas are defined: a circular area (shape="circle") with a radius of 50 pixels and a polygonal area (shape="poly") with specific coordinates for each corner. Each area leads to a different URL.

FAQs About HTML <area> Tag

Q1: What is the purpose of the HTML **<area>** tag?
A: The <area> tag is used to define clickable areas within an image map. Each <area> can link to a different URL or perform unique actions when clicked.

Q2: Can I use the **<area>** tag without the **<map>** tag?
A: No, the <area> tag must always be used within a <map> element, which associates the clickable areas with the image.

Q3: What shapes can be used with the **<area>** tag?
A: The <area> tag supports three main shapes: rect (rectangle), circle, and poly (polygon).

Q4: Does the **<area>** tag improve accessibility?
A: Yes, by using the alt attribute, the <area> tag improves accessibility for users who rely on screen readers or other assistive technologies.

Q5: Can I use the **<area>** tag to trigger JavaScript events?
A: Yes, you can use the href attribute with JavaScript code or use event listeners to trigger JavaScript events when an area is clicked.

tools

HTML

Related Articles