HTML Area href Property: Area URL

HTML Area href Property: Defining Area URLs

The HTML Area href property specifies the URL that the area within an image map links to. This property is fundamental for creating interactive image maps, allowing users to click on different regions of an image to navigate to different web pages or resources.

What is the href Property?

The href attribute, short for “hypertext reference,” is used to define the destination URL for a hyperlink. When applied to the <area> element within an image map, it dictates where the user will be directed upon clicking that specific area.

Purpose of the href Property

The primary purpose of the href property in the context of an <area> element is to:

• Define the target URL for a clickable area in an image map.
• Enable navigation to different web pages or resources from specific regions of an image.
• Enhance user interaction by creating visually intuitive navigation within an image.

Syntax

The href property is specified as an attribute of the <area> element:

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

Attributes

• URL: A valid URL, which can be absolute or relative.
• shape: Defines the shape of the clickable area (e.g., rect, circle, poly).
• coords: Specifies the coordinates of the area, depending on the shape.
• alt: Alternative text for the area, important for accessibility.

Examples

Let’s explore various examples to understand how the href property is used in conjunction with image maps.

Basic Usage

This example demonstrates a simple image map with a rectangular area that links to a specific URL.

<img src="https://www.w3schools.com/tags/planets.gif" alt="Planets" usemap="#planetmap_basic" width="145" height="126">

<map name="planetmap_basic">
  <area shape="rect" coords="0,0,82,126" href="https://www.w3schools.com/html/" alt="W3Schools">
</map>

In this code, the <area> element defines a rectangular area on the image that, when clicked, will navigate the user to the W3Schools HTML tutorial page.

Using Different Shapes

This example showcases an image map with multiple areas of different shapes, each linking to a different URL.

<img src="https://www.w3schools.com/tags/planets.gif" alt="Planets" usemap="#planetmap_shapes" width="145" height="126">

<map name="planetmap_shapes">
  <area shape="rect" coords="0,0,82,126" href="https://www.w3schools.com/html/" alt="W3Schools HTML">
  <area shape="circle" coords="90,58,8" href="https://www.w3schools.com/css/" alt="W3Schools CSS">
  <area shape="circle" coords="124,58,8" href="https://www.w3schools.com/js/" alt="W3Schools JavaScript">
</map>

Here, different shapes (rect and circle) are used to define clickable areas, each associated with a unique href.

Relative URLs

The href property can also use relative URLs to link to other pages within the same website.

<img src="https://www.w3schools.com/tags/planets.gif" alt="Planets" usemap="#planetmap_relative" width="145" height="126">

<map name="planetmap_relative">
  <area shape="rect" coords="0,0,82,126" href="/html/" alt="HTML Tutorial">
</map>

In this case, the href attribute links to a page within the same domain, specified by the relative path /html/.

No href Specified

If no href is specified, the area is not clickable.

<img src="https://www.w3schools.com/tags/planets.gif" alt="Planets" usemap="#planetmap_nohref" width="145" height="126">

<map name="planetmap_nohref">
  <area shape="rect" coords="0,0,82,126" alt="HTML Tutorial">
</map>

In this case, the area with coordinates 0,0,82,126 within the image map will not be clickable because the href property is not defined.

Accessibility Considerations

• Always include the alt attribute in the <area> element to provide descriptive text for screen readers.
• Ensure that the clickable areas are large enough to be easily selected, especially on touch devices.
• Provide alternative navigation options for users who may have difficulty using image maps.

Real-World Applications

The href property is essential in scenarios where visual navigation is key:

• Interactive Maps: Linking different regions of a geographical map to corresponding location pages.
• Product Catalogs: Allowing users to click on specific parts of a product image to view more details.
• Educational Diagrams: Linking different components of a diagram to detailed explanations.

Tips and Notes

• Validate your HTML to ensure that the shape and coords attributes are correctly defined for each <area> element.
• Test your image maps on different devices and browsers to ensure consistent behavior.
• Use descriptive alt text to enhance accessibility and SEO.

By understanding and utilizing the href property effectively, you can create engaging and interactive image maps that enhance the user experience on your website.