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
andcoords
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.