HTML Area hostname Property: Area Hostname

Table of Contents

Understanding the HTML Area `hostname` Property

The HTML <a> (anchor) and <area> elements are fundamental for creating hyperlinks that navigate users to different web pages, sections within a page, or other resources. The hostname property is a crucial part of the URL API, allowing you to programmatically access and manipulate the hostname portion of a URL associated with an area element. This article will delve into the specifics of the hostname property, providing clear explanations, syntax details, and practical examples.

What is the `hostname` Property?

The hostname property of the HTML area element is a string that specifies the hostname part of the URL linked to the area. The hostname identifies the host that the resource resides on (e.g., “www.example.com”). This property is useful for extracting or modifying the hostname of a URL via JavaScript.

Purpose of the `hostname` Property

The primary purpose of the hostname property is to:

Extract the hostname from a URL associated with an <area> element.
Modify the hostname, thus changing the destination of the hyperlink dynamically.
Verify or validate the hostname for security or functional purposes.

Syntax

To access the hostname property of an <area> element, you use the following syntax:

let hostname = areaObject.hostname; // To get the hostname
areaObject.hostname = newHostname; // To set the hostname

Where areaObject is a reference to an <area> element in the DOM, and newHostname is a string representing the new hostname you want to assign.

Important Attributes

There are no specific attributes directly related to the hostname property itself, but the href attribute of the <area> element determines the URL from which the hostname is derived.

Attribute	Type	Description
`href`	String	Specifies the URL that the area links to. The `hostname` property extracts its value from this URL.

Note: Modifying the hostname property directly changes the destination of the link. Exercise caution to ensure the resulting URL is valid and safe. 🛡️

Examples of Using the `hostname` Property

Let’s explore some practical examples of how to use the hostname property with the <area> element.

Basic Example: Accessing the Hostname

In this example, we’ll access the hostname of a URL associated with an <area> element and display it.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap"
  width="300"
  height="200"
/>

<map name="shapesMap">
  <area
    id="areaHostname1"
    shape="rect"
    coords="0,0,100,100"
    href="https://www.example.com/page1.html"
    alt="Rectangle"
  />
</map>

<p id="outputHostname1"></p>

<script>
  const areaHostnameElement1 = document.getElementById("areaHostname1");
  const outputHostnameElement1 = document.getElementById("outputHostname1");
  const hostname1 = areaHostnameElement1.hostname;
  outputHostnameElement1.textContent = "Hostname: " + hostname1;
</script>

Output:

Hostname: www.example.com

Modifying the Hostname

This example demonstrates how to change the hostname of an area link dynamically.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap2"
  width="300"
  height="200"
/>

<map name="shapesMap2">
  <area
    id="areaHostname2"
    shape="rect"
    coords="0,0,100,100"
    href="https://www.example.com/page1.html"
    alt="Rectangle"
  />
</map>

<p id="outputHostname2"></p>

<script>
  const areaHostnameElement2 = document.getElementById("areaHostname2");
  const outputHostnameElement2 = document.getElementById("outputHostname2");

  areaHostnameElement2.hostname = "www.newexample.com";
  const hostname2 = areaHostnameElement2.hostname;
  outputHostnameElement2.textContent = "New Hostname: " + hostname2;
</script>

Output:

New Hostname: www.newexample.com

Real-World Application: Dynamic Link Management

Consider a scenario where you need to redirect users based on certain conditions, such as their geographical location. You can dynamically adjust the hostname to point to a localized version of your website.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap3"
  width="300"
  height="200"
/>

<map name="shapesMap3">
  <area
    id="areaHostname3"
    shape="rect"
    coords="0,0,100,100"
    href="https://www.example.com/default.html"
    alt="Rectangle"
  />
</map>

<p id="outputHostname3"></p>

<script>
  const areaHostnameElement3 = document.getElementById("areaHostname3");
  const outputHostnameElement3 = document.getElementById("outputHostname3");

  // Simulate a condition (e.g., user's location)
  const userLocation = "uk";

  if (userLocation === "uk") {
    areaHostnameElement3.hostname = "www.example.co.uk";
  } else {
    areaHostnameElement3.hostname = "www.example.com";
  }

  const hostname3 = areaHostnameElement3.hostname;
  outputHostnameElement3.textContent = "Hostname: " + hostname3;
</script>

In this example, the hostname is dynamically set based on a hypothetical user location. If the user is in the UK, the hostname is changed to the UK-specific domain.

Advanced Example: Validating Hostname

In more complex scenarios, you might want to validate a hostname before allowing navigation. Here’s how you could implement a basic validation check:

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap4"
  width="300"
  height="200"
/>

<map name="shapesMap4">
  <area
    id="areaHostname4"
    shape="rect"
    coords="0,0,100,100"
    href="https://invalid-hostname/page1.html"
    alt="Rectangle"
  />
</map>

<p id="outputHostname4"></p>

<script>
  const areaHostnameElement4 = document.getElementById("areaHostname4");
  const outputHostnameElement4 = document.getElementById("outputHostname4");

  function isValidHostname(hostname) {
    // Basic validation: Check if the hostname contains at least one dot
    return hostname.includes(".");
  }

  const originalHostname = areaHostnameElement4.hostname;

  if (isValidHostname(originalHostname)) {
    outputHostnameElement4.textContent = "Hostname is valid: " + originalHostname;
  } else {
    outputHostnameElement4.textContent = "Hostname is invalid: " + originalHostname;
    areaHostnameElement4.hostname = "www.example.com"; // Revert to a default hostname
  }
</script>

This example validates the hostname and, if it’s invalid, reverts to a default hostname to ensure the link remains functional.

Note: Always validate user-provided or dynamically generated hostnames to prevent potential security issues. ⚠️

Browser Support

The hostname property is widely supported across modern web browsers, ensuring consistent behavior across different platforms.

Conclusion

The hostname property of the HTML <area> element provides a powerful way to programmatically access and manipulate the hostname portion of a URL. Whether you’re extracting hostname, modifying links dynamically, or validating URLs, understanding the hostname property is essential for advanced web development. By using the examples and explanations in this guide, you can effectively leverage the hostname property to enhance the functionality and security of your web applications.