HTML Area port Property: Area Port

HTML Area port Property: A Comprehensive Guide

The HTML <a> (anchor) and <area> elements are fundamental for creating hyperlinks in web pages. The port property of the <area> element is particularly useful when dealing with specific port numbers in URLs, allowing you to define or retrieve the port associated with a hyperlink. This guide provides a detailed look at the port property, its syntax, and practical examples.

What is the port Property?

The port property is used to get or set the port number part of the URL associated with an <area> element. The port number specifies the network port used to connect to the server. If no port is specified in the URL, the port property returns an empty string ("").

Syntax

Getting the port Property

let portNumber = areaObject.port;

Setting the port Property

areaObject.port = portNumber;

Property Values

Examples

Getting the Port Number

In this example, we retrieve the port number from an <area> element’s href attribute and display it.

<img
  src="shapes.png"
  alt="Planets"
  usemap="#planetmap_getport"
  style="width: 400px; height: 379px;"
/>

<map name="planetmap_getport">
  <area
    shape="rect"
    coords="0,0,82,126"
    href="http://example.com:8080/index.html"
    alt="Sun"
    id="myArea_getport"
  />
</map>

<p id="port_display_getport"></p>

<script>
  const area_getport = document.getElementById("myArea_getport");
  const portDisplay_getport = document.getElementById("port_display_getport");

  const portNumber_getport = area_getport.port;
  portDisplay_getport.textContent = "Port Number: " + portNumber_getport;
</script>

Output:

Port Number: 8080

Setting the Port Number

In this example, we set the port number of an <area> element dynamically using JavaScript.

<img
  src="shapes.png"
  alt="Planets"
  usemap="#planetmap_setport"
  style="width: 400px; height: 379px;"
/>

<map name="planetmap_setport">
  <area
    shape="rect"
    coords="0,0,82,126"
    href="http://example.com/index.html"
    alt="Sun"
    id="myArea_setport"
  />
</map>

<button id="setPortButton_setport">Set Port to 9000</button>
<p id="port_display_setport"></p>

<script>
  const area_setport = document.getElementById("myArea_setport");
  const setPortButton_setport = document.getElementById("setPortButton_setport");
  const portDisplay_setport = document.getElementById("port_display_setport");

  setPortButton_setport.addEventListener("click", () => {
    area_setport.port = "9000";
    portDisplay_setport.textContent = "New URL: " + area_setport.href;
  });
</script>

When the button is clicked, the port number is set to 9000, and the new URL is displayed.

Output:

(Initially)

New URL: http://example.com/index.html

(After clicking the button)

New URL: http://example.com:9000/index.html

Handling Empty Port

This example demonstrates how the port property returns an empty string when no port is specified in the URL.

<img
  src="shapes.png"
  alt="Planets"
  usemap="#planetmap_emptyport"
  style="width: 400px; height: 379px;"
/>

<map name="planetmap_emptyport">
  <area
    shape="rect"
    coords="0,0,82,126"
    href="http://example.com/index.html"
    alt="Sun"
    id="myArea_emptyport"
  />
</map>

<p id="port_display_emptyport"></p>

<script>
  const area_emptyport = document.getElementById("myArea_emptyport");
  const portDisplay_emptyport = document.getElementById(
    "port_display_emptyport"
  );

  const portNumber_emptyport = area_emptyport.port;
  portDisplay_emptyport.textContent =
    "Port Number: " + (portNumber_emptyport || "Not specified");
</script>

Output:

Port Number: Not specified

Use Cases

1. Dynamic URL Modification: Allows you to dynamically change the port number of a URL based on user input or application logic.
2. Conditional Navigation: Useful in scenarios where the port number needs to be changed based on certain conditions, such as switching between development and production environments.
3. API Integrations: When integrating with APIs that require specific port numbers, this property helps in constructing the correct URLs.

Notes

• If the provided port number is invalid (e.g., not a number or out of the valid range), some browsers may handle it differently. It’s good practice to validate the port number before setting it.
• Modifying the port property updates the href attribute of the <area> element.

Browser Support

The port property is widely supported across modern web browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Conclusion

The port property of the HTML <area> element provides a straightforward way to manipulate the port number component of a URL. Whether you’re retrieving or setting the port, understanding this property is essential for dynamic URL management in web development. By using the examples and guidelines provided in this article, you can effectively implement the port property in your projects. 🚀