HTML Area host Property: Area Host

HTML Area host Property: Understanding the Area Host

The HTML <a> (anchor) and <area> elements are used to create hyperlinks on web pages. The host property of the <area> object in JavaScript returns or sets the hostname and port number of a URL. This property is particularly useful when you need to extract or modify the host portion of a URL associated with an area within an image map.

What is the host Property?

The host property represents the hostname and port number of a URL. The hostname identifies the server where the resource is hosted, and the port number specifies the network port used for the connection. The host property is a string that combines these two components. If the port is the standard port (80 for HTTP or 443 for HTTPS), it might not be explicitly included in the host property.

Purpose of the host Property

• Extract Host Information: Retrieve the hostname and port number from a URL.
• Modify Host Information: Change the hostname and port number of a URL.
• URL Manipulation: Dynamically update the URL associated with an area in an image map based on user interactions or application logic.

Syntax

Getting the host Property

const host = areaObject.host;

Setting the host Property

areaObject.host = "hostname:port";

• areaObject: A reference to an <area> element in the HTML document.
• host: A string representing the hostname and port number.

Detailed Attribute Table

The host property does not have attributes in the HTML tag itself. It is a property that you can access and manipulate via JavaScript.

Property	Type	Description
`host`	String	Gets or sets the hostname and port number of the URL associated with the area.

Examples

Basic Example: Getting the host Property

This example demonstrates how to retrieve the host property of an <area> element.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap"
  id="imageMapExampleHost"
/>

<map name="shapesMap" id="shapesMapExampleHost">
  <area
    shape="rect"
    coords="50,50,100,100"
    href="https://www.example.com:8080/rect.html"
    alt="Rectangle"
    id="rectangleAreaHost"
  />
</map>

<p id="hostOutputHost"></p>

<script>
  const areaElementHost = document.getElementById("rectangleAreaHost");
  const hostOutputElementHost = document.getElementById("hostOutputHost");

  const areaHostHost = areaElementHost.host;
  hostOutputElementHost.textContent = "Area Host: " + areaHostHost;
</script>

Output:

Area Host: www.example.com:8080

In this example, we retrieve the host property of the <area> element with the ID rectangleAreaHost and display it in a paragraph element.

Setting the host Property

This example demonstrates how to set the host property of an <area> element.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMapSet"
  id="imageMapExampleSetHost"
/>

<map name="shapesMapSet" id="shapesMapExampleSetHost">
  <area
    shape="rect"
    coords="50,50,100,100"
    href="https://www.example.com/rect.html"
    alt="Rectangle"
    id="rectangleAreaSetHost"
  />
</map>

<p id="hostOutputSetHost"></p>

<script>
  const areaElementSetHost = document.getElementById("rectangleAreaSetHost");
  const hostOutputSetHost = document.getElementById("hostOutputSetHost");

  areaElementSetHost.host = "www.newexample.com:9000";
  hostOutputSetHost.textContent =
    "New Area Host: " + areaElementSetHost.host;
</script>

Output:

New Area Host: www.newexample.com:9000

Here, we set the host property of the <area> element to a new value and display the updated host.

Getting Host Without Explicit Port

If the URL does not explicitly include a port, the host property will only return the hostname.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMapNoPort"
  id="imageMapExampleNoPortHost"
/>

<map name="shapesMapNoPort" id="shapesMapExampleNoPortHost">
  <area
    shape="rect"
    coords="50,50,100,100"
    href="https://www.example.com/rect.html"
    alt="Rectangle"
    id="rectangleAreaNoPortHost"
  />
</map>

<p id="hostOutputNoPortHost"></p>

<script>
  const areaElementNoPortHost = document.getElementById(
    "rectangleAreaNoPortHost"
  );
  const hostOutputNoPortHost = document.getElementById("hostOutputNoPortHost");

  const areaHostNoPortHost = areaElementNoPortHost.host;
  hostOutputNoPortHost.textContent = "Area Host: " + areaHostNoPortHost;
</script>

Output:

Area Host: www.example.com

In this case, the host property returns just the hostname because the URL does not specify a port.

Modifying Host Dynamically

This example shows how to dynamically modify the host based on user interaction.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMapDynamic"
  id="imageMapExampleDynamicHost"
/>

<map name="shapesMapDynamic" id="shapesMapExampleDynamicHost">
  <area
    shape="rect"
    coords="50,50,100,100"
    href="https://www.example.com/rect.html"
    alt="Rectangle"
    id="rectangleAreaDynamicHost"
  />
</map>

<input type="text" id="newHostInputHost" placeholder="Enter new host" />
<button id="updateHostButtonHost">Update Host</button>
<p id="hostOutputDynamicHost"></p>

<script>
  const areaElementDynamicHost = document.getElementById(
    "rectangleAreaDynamicHost"
  );
  const newHostInputHost = document.getElementById("newHostInputHost");
  const updateHostButtonHost = document.getElementById("updateHostButtonHost");
  const hostOutputDynamicHost = document.getElementById(
    "hostOutputDynamicHost"
  );

  updateHostButtonHost.addEventListener("click", () => {
    const newHostValueHost = newHostInputHost.value;
    areaElementDynamicHost.host = newHostValueHost;
    hostOutputDynamicHost.textContent =
      "New Area Host: " + areaElementDynamicHost.host;
  });
</script>

This code sets up an input field and a button. When the button is clicked, the script updates the host property of the <area> element with the value entered in the input field.

Accessing Host with Non-Standard Port

This example demonstrates accessing the host property when a non-standard port is used in the URL.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMapNonStandardPort"
  id="imageMapExampleNonStandardPortHost"
/>

<map name="shapesMapNonStandardPort" id="shapesMapExampleNonStandardPortHost">
  <area
    shape="rect"
    coords="50,50,100,100"
    href="https://www.example.com:8000/rect.html"
    alt="Rectangle"
    id="rectangleAreaNonStandardPortHost"
  />
</map>

<p id="hostOutputNonStandardPortHost"></p>

<script>
  const areaElementNonStandardPortHost = document.getElementById(
    "rectangleAreaNonStandardPortHost"
  );
  const hostOutputNonStandardPortHost = document.getElementById(
    "hostOutputNonStandardPortHost"
  );

  const areaHostNonStandardPortHost = areaElementNonStandardPortHost.host;
  hostOutputNonStandardPortHost.textContent =
    "Area Host: " + areaHostNonStandardPortHost;
</script>

Output:

Area Host: www.example.com:8000

The host property correctly returns the hostname and the non-standard port number.

Real-World Applications

• Dynamic URL Management: Modify the host of an area link based on user preferences or server configurations.
• Content Delivery Networks (CDNs): Update the host to point to different CDN servers based on geographic location or network conditions.
• Load Balancing: Change the host to distribute traffic across multiple servers, improving performance and reliability.

Browser Support

The host property is supported by all major browsers, including Chrome, Firefox, Safari, and Edge.

Note: Ensure cross-browser compatibility by testing your code on different browsers. 🧐

Conclusion

The host property of the HTML <area> element provides a way to access and modify the hostname and port number of a URL. This property is useful for dynamic URL management, content delivery, and other advanced web development scenarios. By understanding and utilizing the host property, you can create more flexible and responsive web applications. 💡