How to link pages using relative URL in HTML?

HTML Web Development Front End Technology

In HTML different HTML elements have attributes that contain link to the other resources. The values of these attributes are URL’s, these can be absolute or relative URL’s.

Relative URLs don’t contain full web address. With relative URL we start automatically from the address the browser currently at then we add path components and then extension. Explicitly tells the browser to use the current folder.

Syntax

Following is the syntax to link a page using relative URL.

<a href="relative URL">Link text…</a>

Example

Following is the example program to link a page using relative URL.

Login Page


<!DOCTYPE html>
<html>
<body>
   <h2>Relative link</h2>
   <h3>Sign In Page</h3>
   <form>
      <label for="fname">Email Address</label><br>
      <input type="text" id="fname" name="fname" ><br>
      <label for="lname">Password</label><br>
      <input type="text" id="lname" name="lname" ><br><br>
      <input type="submit" value="Login"> <a href="Untitled-2.html">Sign Up</a>
   </form>
</body>
</html>

SignUp Page


<!DOCTYPE html>
<html>
<body>
   <h2>Relative link</h2>
   <h3>Sign Up Page</h3>
   <form>
      <label for="fname">Name</label><br>
      <input type="text" id="fname" name="fname" ><br>
      <label for="email">Email</label><br>
      <input type="text" id="email" name="email" ><br>
      <label for="fname">Password</label><br>
      <input type="text" id="fname" name="fname" ><br>
      <label for="lname"> Re-enter Password</label><br>
      <input type="text" id="lname" name="lname" ><br><br>
      <input type="submit" value="Submit"> <a href="Untitled-1.html">Login</a>
   </form>
</body>
</html>

In the above example we have linked two different pages using relative URL. Relative URLs don’t contain full web address. As we can see in the above example program.

Lokesh Badavath

Updated on: 11-Nov-2022

13K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started