HTML Tag <area>: Usage, Attributes, and Examples

Introduction

The <area> tag in HTML defines active areas of an image, which serve as clickable links. Together with the <map> tag, these active areas create what is called an image map. While it looks like an ordinary image, an image map is divided into invisible zones of various shapes, each serving as a hyperlink. These areas allow users to interact with specific parts of the image, redirecting them to different documents, windows, or frames.

The <area> tag specifies the shape, dimensions, target URL, and additional properties of each active region on the image. It is always used within the <map> container, which links the defined coordinates of the areas to the image.

Default Behavior

If multiple <area> elements overlap, the clickable region higher up in the HTML code takes precedence over those beneath it.

Syntax

HTML

<map>
  <area href="URL">
</map>

XHTML

<map>
  <area href="URL" />
</map>

Attributes of <area>

The <area> tag supports several attributes for customization and functionality. Below is a breakdown of key attributes:

Global Attributes

These attributes are available across all HTML elements:

  • class: Specifies a class name for CSS styling.
  • id: Assigns a unique identifier.
  • style: Defines inline CSS styles.

Specific Attributes

  • accesskey: Assigns a keyboard shortcut for quick navigation to the area.
  • alt: Provides alternative text for the area, improving accessibility.
  • coords: Specifies the coordinates of the area (e.g., for polygons or rectangles).
  • href: Indicates the URL for the target document.
  • hreflang: Defines the language of the linked document.
  • nohref: Defines an area without a hyperlink.
  • shape: Specifies the shape of the area (rect, circle, poly).
  • tabindex: Sets the navigation order when using the Tab key.
  • target: Defines the name of the window or frame where the document will be loaded.
  • type: Specifies the MIME type of the linked document.

Closing Tag

The <area> tag is self-closing and does not require a closing tag.

Example

Below is an example that illustrates the use of the <area> tag to create a navigable image map:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Area Tag Example</title>
  <style>
    #title {
      line-height: 0; /* Adjusts line spacing */
    }
    #title img {
      border: none; /* Removes image border */
    }
  </style>
 </head>
 <body> 
  <div id="title">
    <img src="images/title.png" width="640" height="158" alt="Educational Center">
    <br>
    <img src="images/navigation.png" width="640" height="30" alt="Site Navigation" usemap="#Navigation">
  </div>
  <p>
    <map name="Navigation">
      <area shape="poly" coords="113,24,211,24,233,0,137,0" href="info.html" alt="Information">
      <area shape="poly" coords="210,24,233,0,329,0,307,24" href="events.html" alt="Events">
      <area shape="poly" coords="304,24,385,24,407,0,329,0" href="departments.html" alt="Departments">
      <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Technical Information">
      <area shape="poly" coords="449,24,501,24,525,0,473,0" href="training.html" alt="Training">
      <area shape="poly" coords="501,24,560,24,583,0,525,0" href="careers.html" alt="Careers">
      <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misc.html" alt="Miscellaneous">
    </map>
  </p>
 </body>
</html>

Best Practices

To maximize the effectiveness of image maps:

  • Ensure Accessibility: Provide descriptive alt attributes for all areas to make the image map usable by assistive technologies.
  • Use Clear Shapes: Choose simple shapes (rect, circle, or poly) with precise coordinates for accurate interaction.
  • Optimize Images: Compress and optimize images for fast loading without sacrificing quality.

Attributes of the <area> Tag: Detailed Description

The <area> tag supports various global and specific attributes, providing flexibility and functionality for creating interactive image maps. Below is a detailed explanation of these attributes:

Global Attributes

The <area> tag includes all global attributes common across HTML elements, such as class, id, style, and title. These attributes allow for styling and improved accessibility.

Specific Attributes

  • accesskey: Assigns a keyboard shortcut (navigation accelerator) for quick access to the defined area. When pressed in combination with the specified key (e.g., ALT or another modifier key), it selects the interactive element. Note: Avoid using shortcuts already reserved by browsers to ensure functionality.
  • alt: Provides alternative text that describes the area for accessibility or when the associated image is unavailable. It should provide users with the same context as the visual element. In HTML4, this attribute is mandatory and may contain an empty string (""). In HTML5, alt is required only when href is present.
  • coords: Specifies the coordinates that define the shape and dimensions of the clickable area. The format of the values depends on the shape attribute:
    • rect: Two pairs of x, y coordinates representing the top-left and bottom-right corners (e.g., left,top,right,bottom).
    • circle: A set of x, y, r values representing the center coordinates and radius (e.g., centerX,centerY,radius).
    • poly: Multiple pairs of x, y coordinates for each vertex of the polygon (e.g., x1,y1,x2,y2,...).
    Values can be specified in pixels or percentages in HTML4, while in HTML5, pixel-based values are standard.
  • download: Indicates that the associated link is used for downloading a file instead of opening it. See the <a> tag for more detailed descriptions of the download attribute.
  • href: Defines the URL that the area links to. This attribute is mandatory in HTML4 unless nohref is used. In HTML5, it is optional if the clickable area does not function as a hyperlink.
  • hreflang: Specifies the language of the linked resource. Values follow the BCP47 standard (e.g., en-US for English). This attribute should be used only when href is present.
  • name: Assigns a name to the interactive area for compatibility with older browsers.
  • media: Serves as a hint for the media type targeted by the linked resource (e.g., print or screen). If omitted, the default value is all. Use this attribute only if href is present.
  • nohref: Indicates that the area does not link to any external resource. Either href or nohref must be specified within the element.
  • referrerpolicy: Determines the referrer information sent when the resource is accessed. Available values include:
    • "no-referrer": No Referer header is sent.
    • "no-referrer-when-downgrade": Default behavior; sends no header when navigating to a non-secure origin.
    • "origin": Sends only the origin of the current page (scheme, host, port).
    • "origin-when-cross-origin": Sends the full referrer for same-origin navigations and the origin only for cross-origin requests.
    • "unsafe-url": Sends the full referrer (excluding fragments, passwords, or usernames). This approach is less secure.
  • rel: Specifies the relationship between the current document and the linked resource. Common values include nofollow, noopener, and noopener noreferrer. This attribute is useful for improving SEO and security. Only use rel if href is present.
  • shape: Defines the shape of the active area. Supported values include:
    • rect: Rectangular region.
    • circle: Circular region.
    • poly: Polygonal region defined by multiple coordinate points.
    • default: Covers the entire image excluding previously defined regions.
  • tabindex: Specifies the tab order for keyboard navigation between elements. This numeric value helps control the sequence of focusable items. The attribute is considered global in HTML5.
  • target: Determines where the linked resource should be displayed. Acceptable values include:
    • _self: Opens the link in the current browsing context. (Default behavior)
    • _blank: Opens the link in a new browsing context (e.g., new tab or window).
    • _parent: Opens the link in the parent browsing context. If there is no parent, it behaves like _self.
    • _top: Opens the link in the top-level browsing context, canceling frames or inline frames.
  • type: Specifies the MIME type of the linked resource (e.g., audio/wav for audio files). While it is advisory, browsers may display specific icons representing media types. Use type only if href is present.

Conclusion

The <area> tag, when paired with <map>, creates interactive and clickable image regions that enhance user navigation. It offers flexibility in design while maintaining accessibility and usability. By understanding its syntax, attributes, and best practices, developers can leverage this tag to create engaging web experiences.

Whether you’re building educational resources or designing creative layouts, the <area> tag unlocks a world of interactive possibilities.









LUXDAD

A platform dedicated to fostering creativity, sharing knowledge, and bring ideas to life. With ideas and creativity through quality content and innovative solutions, we strive to create meaningful experiences that resonate with modern world.

Read About Us
LINKS
About Us Sitemap Crawler


1999 - 2025 © LUXDAD. Design and content belong to LUXDAD. All Rights Reserved in accordance of Authority Law by USA & EU.

An unhandled error has occurred. Reload 🗙