A freshly created <a> element has no href attribute, so its href property returns an empty string.
js
const anchor = document.createElement("a");
console.log(anchor.href); // ""
If the attribute is set to an empty string, the property returns the document's base URL because the empty string is a valid relative URL.
js
anchor.href = "";
console.log(anchor.href); // "https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/href"
If the attribute is set to a relative URL, the property returns the absolute URL resolved against the document's base URL.
js
anchor.href = "../../..";
console.log(anchor.href); // "https://developer.mozilla.org/en-US/docs/"
Note that the attribute's value remains as set, without resolution.
js
console.log(anchor.getAttribute("href")); // "../../.."
If the attribute is set to an absolute URL, the property returns that absolute URL as-is.
js
anchor.href = "https://example.com/path";
console.log(anchor.href); // "https://example.com/path"
If the attribute is set to an invalid URL, the property returns the attribute's value as-is.
js
anchor.href = "https://";
console.log(anchor.href); // "https://"