The HTML href attribute is used to specify the destination URL of a link or the location of an external resource.
Definition and Usage
➔ It is mainly used with the <a>, <link>, <base> and <area> elements.
➔ href linking can be done with an absolute or relative URL.
➔ Absolute URLs provide the full address of a web resource (e.g.: <a href="https://www.myexample.com/page1.html">Go Page1</a>).
➔ Relative URLs specify the path to a resource relative to the current location or base location (e.g. <a href="chapters/ch02.html">Chapter 2</a>).
Syntax
//In HTML
<a href="url" id="visitId">Visit us.</a>
<a href="#section1">Go to Section 1 on the same page.</a>
<a href="#">Reload and remain on the same page.</a>
<a href="javascript:void(0);" onclick="myFunction()">Without reload, remain on the same page.</a>
<a href="mailto:info@example.com">Send email</a>
<a href="tel:+12345678910">Call Now</a>
<a href="file_path.jpeg" download>Download file</a>
<a href="javascript:alert('You Clicked.');">Click me</a>
<link rel="stylesheet" href="styles.css">
<base href="https://www.myexample.com/html/">
//In JavaScript
<script>
let visit = document.querySelector("#visitId");
visit.href = "https://www.myexample.com";
visit.setAttribute("href", "https://www.myexample.com")
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML href attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
margin: 5px 5px 50px 5px;
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body>
<div id="section1" class="mydiv">
<h3>Section 1</h3>
<h3>HTML href attribute example</h3>
<p>The href attribute is used to specify the destination URL link of an external resource.</p>
<a href="https://w3context.com" id="visitId">Visit us.</a><br><br>
<a href="mailto:info@example.com">Send email</a><br><br>
<a href="tel:+12345678910">Call Now</a><br><br>
<a href="resources/images/box.png" download="filename">Download image file</a><br><br>
<a href="javascript:alert('Script executed.');">Click me to run script (Not recommended).</a><br><br><br><br>
<a href="#section2">Go to Section 2 on the same page.</a><br><br>
<a href="javascript:void(0);" onclick="myFunction()">Without reload, remain on the same page.</a><br><br>
<br><br>
<link rel="stylesheet" href="mystyles.css"><br><br><br><br>
</div>
<div id="section2" class="mydiv">
<h3>Section 2</h3>
<p>The href attribute is used to specify the destination URL link of an external resource.</p>
<a href="#section1">Go to Section 1 on the same page.</a><br><br>
<a href="#">Reload and remain on the same page.</a><br><br>
<a href="javascript:void(0);" onclick="myFunction()">Without reload, remain on the same page.</a><br><br>
<br><br>
</div>
</body>
<script>
let element = document.querySelector("#visitId");
element.href = "https://w3context.com";
element.setAttribute("href", "https://w3context.com");
function myFunction() {
alert('You Clicked. Page not reload.')
}
</script>
</html>
Click on the "Try it Now" button to see how it works.