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