HTML Area hash Property: Understanding Area Hash
The hash property of the HTML area element is a string representing the portion of the URL that follows the # symbol, also known as the fragment identifier. This property is primarily used to link to a specific section within a document. When a user clicks on an area with a hash value, the browser will attempt to scroll to the element within the document that has a matching id or name attribute.
Purpose and Use Cases
The primary purpose of the hash property is to enable navigation to specific sections within a webpage. This is particularly useful for:
- Single-page applications (SPAs): Where content is dynamically loaded and displayed without full page reloads.
- Long documents: Allowing users to quickly jump to specific sections of a lengthy page, such as a table of contents.
- Accessibility: Providing a means for screen readers and other assistive technologies to navigate directly to specific content.
Syntax
The syntax for accessing the hash property of an HTML area element in JavaScript is as follows:
let areaHash = areaObject.hash; // To get the hash
areaObject.hash = newHash; // To set the hash
Where areaObject is a reference to an HTML area element, areaHash is a string containing the current hash value, and newHash is the new hash value you wish to assign.
Attributes
The hash property does not have any associated HTML attributes beyond the standard attributes applicable to the area element. Its primary purpose is for dynamic manipulation via JavaScript.
Examples
Let’s explore some practical examples of how to use the hash property with the HTML area element.
Example 1: Basic Usage – Getting and Setting the Hash
This example demonstrates how to get and set the hash property of an area element using JavaScript.
<img
src="image.png"
alt="Planets"
usemap="#planetmap"
style="width: 400px; height: 379px;"
/>
<map name="planetmap">
<area
id="myArea"
shape="rect"
coords="0,0,82,126"
href="newpage.htm"
alt="Sun"
/>
</map>
<p id="demo"></p>
<button onclick="getHash()">Get Hash</button>
<button onclick="setHash()">Set Hash</button>
<script>
const area_hash_element = document.getElementById("myArea");
const demo_area_hash_paragraph = document.getElementById("demo");
function getHash() {
demo_area_hash_paragraph.innerHTML =
"Hash: " + area_hash_element.hash;
}
function setHash() {
area_hash_element.hash = "#section2";
demo_area_hash_paragraph.innerHTML =
"New Hash: " + area_hash_element.hash;
}
</script>
Output:
After clicking “Get Hash”:
Hash:
After clicking “Set Hash”:
New Hash: #section2
Example 2: Navigating to a Specific Section
In this example, we’ll create an image map with an area that, when clicked, navigates to a specific section of the same page using the hash property.
<img
src="image.png"
alt="Document Sections"
usemap="#sectionmap"
style="width: 400px; height: 300px;"
/>
<map name="sectionmap">
<area
id="areaSection"
shape="rect"
coords="50,50,200,200"
href="#section1"
alt="Section 1"
/>
</map>
<div style="margin-top: 500px;">
<h2 id="section1">Section 1</h2>
<p>
This is Section 1 of the document. Clicking the area will navigate you
here.
</p>
</div>
<script>
const area_section_element = document.getElementById("areaSection");
area_section_element.addEventListener("click", function (event) {
event.preventDefault(); // Prevent default navigation
window.location.hash = area_section_element.hash; // Manually navigate
});
</script>
In this example, clicking on the defined area will scroll the page to the section1 element. Note that the href attribute is used to set the initial hash, and the JavaScript ensures that the navigation occurs smoothly.
Example 3: Dynamically Changing the Hash
This example demonstrates how to dynamically change the hash property based on user interaction, such as selecting an option from a dropdown menu.
<img
src="image.png"
alt="Navigation Map"
usemap="#navmap"
style="width: 400px; height: 300px;"
/>
<map name="navmap">
<area
id="navArea"
shape="rect"
coords="50,50,200,200"
href="#defaultSection"
alt="Default Section"
/>
</map>
<select id="sectionSelect">
<option value="#sectionA">Section A</option>
<option value="#sectionB">Section B</option>
<option value="#sectionC">Section C</option>
</select>
<div style="margin-top: 500px;">
<h2 id="defaultSection">Default Section</h2>
<p>This is the default section.</p>
<h2 id="sectionA">Section A</h2>
<p>Content for Section A.</p>
<h2 id="sectionB">Section B</h2>
<p>Content for Section B.</p>
<h2 id="sectionC">Section C</h2>
<p>Content for Section C.</p>
</div>
<script>
const nav_area_element = document.getElementById("navArea");
const section_select_element = document.getElementById("sectionSelect");
section_select_element.addEventListener("change", function () {
nav_area_element.hash = this.value;
// Manually trigger navigation
window.location.hash = nav_area_element.hash;
});
</script>
In this case, selecting a different option from the dropdown menu will change the hash of the area element and navigate to the corresponding section of the page.
Example 4: Using the Hash to Control Content Visibility
This example shows how the hash property can be used to control the visibility of different content sections on a page.
<img
src="image.png"
alt="Content Sections"
usemap="#contentmap"
style="width: 400px; height: 300px;"
/>
<map name="contentmap">
<area
id="contentArea"
shape="rect"
coords="50,50,200,200"
href="#sectionOne"
alt="Section One"
/>
</map>
<div id="sectionOne" class="section">
<h2>Section One</h2>
<p>This is the content for Section One.</p>
</div>
<div id="sectionTwo" class="section" style="display: none;">
<h2>Section Two</h2>
<p>This is the content for Section Two.</p>
</div>
<div id="sectionThree" class="section" style="display: none;">
<h2>Section Three</h2>
<p>This is the content for Section Three.</p>
</div>
<script>
const content_area_element = document.getElementById("contentArea");
content_area_element.addEventListener("click", function (event) {
event.preventDefault(); // Prevent default navigation
const targetSectionId = this.hash.substring(1); // Remove the '#'
const sections = document.querySelectorAll(".section");
// Hide all sections
sections.forEach((section) => (section.style.display = "none"));
// Show the target section
const targetSection = document.getElementById(targetSectionId);
if (targetSection) {
targetSection.style.display = "block";
}
window.location.hash = this.hash; // Update the URL hash
});
// Initial setup based on URL hash
window.addEventListener("load", function () {
if (window.location.hash) {
const targetSectionId = window.location.hash.substring(1);
const sections = document.querySelectorAll(".section");
sections.forEach((section) => (section.style.display = "none"));
const targetSection = document.getElementById(targetSectionId);
if (targetSection) {
targetSection.style.display = "block";
}
}
});
</script>
<style>
.section {
margin-top: 50px;
}
</style>
In this example, clicking the area element controls which content section is visible by manipulating the display property of the content sections and updating the URL hash.
Tips and Considerations
- Accessibility: Ensure that any navigation driven by the
hashproperty is accessible. Provide clear visual cues and semantic HTML to aid users, especially those using assistive technologies. - Single-Page Applications (SPAs): In SPAs, the
hashproperty is often used for routing and managing application state without full page reloads. - Event Handling: When using the
hashproperty for navigation, remember to useevent.preventDefault()to prevent the default navigation behavior and implement your custom navigation logic. - Browser Compatibility: The
hashproperty is widely supported across all modern browsers.
Browser Support
The hash property of the HTML area element is supported by all major browsers, including Chrome, Firefox, Safari, and Edge. This ensures consistent behavior across different platforms.
Conclusion
The hash property of the HTML area element is a valuable tool for creating navigable and interactive web pages. By understanding how to use this property effectively, you can enhance the user experience, especially in single-page applications and long documents. From basic navigation to controlling content visibility, the hash property offers a wide range of possibilities for modern web development.
