HTML - href Attribute

HTML href attribute is used to specify the URL of a webpage or resource that a hyperlink points to.

If the href attribute is not present, then the <a> tag will not be treated as a hyperlink, and if we have not assigned a value to the href attribute then nothing will happen when the user clicks on the link. We can use the href = #id_name or href = #top to link the top or any other page section in the same document to the current page.

Syntax

<a href = "value"></a>

Where, value could be any local file location, image location, online website URL, online image URL, #id of any section, etc.

Applies On

Below listed elements allow using of the HTML href attribute

Element	Description
<a>	HTML <a> tag is used to attach external resource using links to webpage.
<link>	HTML <link> tag specifies relationship between the current document and an external resource.
<base>	HTML <base> tag is used to specify base URL.
<area>	HTML <area> tag specifies the areas of the image, mapping that can be clicked on or are active areas that are linked to by hyperlinks.

Example of HTML href attribute

Below examples will illustrate the HTML href attribute, where and how we should use this attribute!

HTML hyperlink using href Attribute

In the following example, we are going to use the href attribute with the <a> tag to create a hyperlink to a external resource.

<!DOCTYPE html>
<html lang="en">
<body>
   <h1>HTML href Attribute</h1>
   <p>
      Visit the following website.
   </p>
   <a href="https://www.tutorialspoint.com">
      Learn some tutorials
   </a>
</body>

</html>

Clickable link to Email Address

In this example we create a link to send mail to a specified email. We are using 'mailto:' before email name inside href value to achieve this.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML href mailto Example</title>
</head>

<body>
    <h1>Contact Us</h1>
    <p>
        If you have any questions, feel free to 
        <a href="mailto:info@example.com">
            send us an email
        </a>
    </p>
</body>

</html>

Clickable link to Phone Number

Here we create a hyperlink to a specified phone number, enabling single-click phone call functionality, utilizing the tel: value of the href attribute. (Work in your mobile devies)

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML href tel Example</title>
</head>

<body>
   <h1>Contact Us</h1>
   <p>
      If you have any questions, feel free to
      call us:  
      <a href="tel:+91-9876543210">
            9876543210
      </a>
   </p>
</body>

</html>

Inline JavaScript using href Attribute

The code below illustrate the utilization of the href attribute to execute inline JavaScript code. Here we use 'javascript:' title before code inside href value to mention inline javascript code.

<!DOCTYPE html>
<html lang="en">

<body>
    <h3>HTML href Attribute</h3>
    <strong>
      Execute inline JavaScript using href Attribute
    </strong>
    <p>
        Click the following link to execute JavaScript:
        <a href="javascript:document.write('Welcome to Tutorialspoint!');">
            Execute JavaScript
        </a> 
    </p> 
</body>

</html>

On page navigation using href Attribute

In the below code we demonstrate the usage of the href attribute to navigate to a different section within the same page. We provide '#idofsection' inside href to navigate section of our need.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
    <h2>Ed-Tech</h2>
    <div> 
        <p>
            Tutorialspoint: Simply Easy Learning
        </p>
        <a href="#about">Know More</a>
    </div>
    <h2 id="about">Section 2</h2>
    <div> 
        <p>
            Tutorials Point is an online learning platform
            providing free tutorials, paid premium courses,
            and eBooks. Learn the latest technologies and 
            programming languages SQL, MySQL, Python, C, 
            C++, Java, Python, PHP, Machine Learning, data
            science, AI, Prompt Engineering and more.
        </p>
    </div>
</body>

</html>

Import a stylesheet into HTML

Here in this code we use herf attribute inside link tag to import a external css stylesheet to a HTML page. This code will not work on out ide, you have to run this local server.

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Import CSS using Link Tag</title>
      <!-- Link to external CSS file -->
      <link rel="stylesheet" href="styles.css">
</head>
<body>
      <h1>Imported CSS using Link Tag</h1>
</body>
</html>

styles.css

body{
   background-color: red;
   font-size: 5px;
}

Supported Browsers

Attribute
href	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm