HTML - href Attribute

The HTML href attribute is used to specify the URL 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

Following is the syntax of the HTML href attribute −

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

Example

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'maxlength' attribute</title>
</head>
<body>
   <!-- example of the HTML 'maxlength'-->
   <form> Write your feedback: <br>
      <textarea name="" id="" cols="30" rows="5" placeholder="Your feedback...." maxlength="30"></textarea>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the nav bar displayed on the webpage.

Example

Considering the another scenario, where we are going to redirect the local file using href attribute with a element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML href attribute</title>
   <style>
      a {
         text-decoration: none;
         width: 100px;
         background-color: aqua;
         padding: 8px;
      }
   </style>
</head>
<body>
   <!--example of the href attribute-->
   <p>'href' attribute with a element</p>
   <nav>
      <a href="/html/src/class.htm">Redirect to form</a>
   </nav>
</body>
</html>

Following are the contents of the file, class.htm −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML class attribute</title>
   <style>
      form {
         width: 300px;
         height: 230px;
         background-color: aquamarine;
         border-radius: 10px;
      }

      form h1 {
         text-align: center;
      }

      form label {
         padding: 10px 10px;
      }

      form input {
         padding: 5px 5px;
         margin: 5px;
      }

      form button {
         width: 100px;
         padding: 5px;
         position: relative;
         top: 10px;
         left: 50px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <p>Example of the HTML 'class' attribute</p>
   <form>
      <h1>HTML Form</h1>
      <label for="">Name: </label>
      <input type="text">
      <br>
      <label for="">Email: </label>
      <input type="text">
      <br>
      <label for="">Mobile:</label>
      <input type="text">
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the hyperlink applied with CSS on the webpage. when the user clicks on the link it will redirect and opens the another file.

Example

Let's look at the following example, where we are going to display the local image using the href attribute with 'a' element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML href attribute</title>
   <style>
      a {
         text-decoration: none;
         width: 100px;
         background-color: rgb(175, 9, 167);
         padding: 8px;
         color: white;
      }
   </style>
</head>
<body>
   <!--example of the href attribute-->
   <p>'href' attribute with a element</p>
   <nav>
      <a href="/html/images/test_image.jpg">Display image</a>
   </nav>
</body>
</html>

When we run the above code, it will generate an output consisting of text along with a hyperlink displayed on the webpage. when the user clicks on the hyperlink it will displays the image.

Example

Following is the example, where we are going to use the href attribute to specify the URL of the page that redirects when the user clicks.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML href attribute</title>
   <style>
      a {
         text-decoration: none;
         width: 100px;
         background-color: rgb(175, 9, 167);
         padding: 8px;
         color: white;
      }
   </style>
</head>
<body>
   <!--example of the href attribute-->
   <p>'href' attribute with a element</p>
   <nav>
      <a href="https://www.tutorialspoint.com/index.htm">Tutorialspoint</a>
      <a href="https://www.google.com/">Google</a>
   </nav>
</body>
</html>

On running the above code, the output window will pop up displaying the two hyperlinks on the webpage. When the user clicks on the links it will redirects to respective pages.

html_attributes_reference.htm
Advertisements