How To Link Two Pages In HTML ?
Last Updated :
17 May, 2025
The linking of two pages in HTML is a fundamental aspect of web development, used in over 95% of websites for navigation. The most common method is through the <a> (anchor) tag, which creates hyperlinks to other pages or resources. In this article, we will explore various ways to link pages in HTML, along with syntax and examples for each method.
There are approaches to link the two pages in HTML:
Using the <a> Tag with href Attribute
The <a> tag is the most straightforward and widely used method to create hyperlinks in the HTML. The href (hypertext reference) attribute within the <a> tag specifies the destination URL of the link. When the user clicks on the hyperlink, the browser navigates to the page specified in the href attribute.
Syntax
<a href="destination.html">Link Text</a>
Example: Below is an example demonstrating the use of the <a> tag with the href attribute. In this example, the text enclosed within the <a> tag becomes a clickable link that, when clicked, opens another page.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Page 1</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>This is Page 1</h2>
<p><a href="page.html">
Go to Page 2</a></p>
</body>
</html>
<!-- page.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Page 2</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>This is Page 2</h2>
<p><a href="index.html">
Go back to Page 1</a></p>
</body>
</html>
Output
The form can also be used to link the two pages, although this is less common. This method can involves creating the form with an action attribute that the points to the desired page. When the user clicks the submit button, the form data can sent to the target page specified in the action attribute and the browser navigates to that page.
Syntax
<form action="destination.html">
<input type="submit" value="Button Text">
</form>
Example: Below is the example demonstrating the use of <form> tag with a button, form is primarily used for submitting data to server, but it can also be used simply for navigation.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Page 1</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>This is Page 1</h2>
<form action="page.html">
<input type="submit"
value="Go to Page 2">
</form>
</body>
</html>
<!-- page.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Page 2</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>This is Page 2</h2>
<p><a href="index.html">
Go back to Page 1</a></p>
</body>
</html>
Output
The <button> tag can be used to create the clickable button and with the help of the JavaScript, it can be programmed to the navigate to another page. This approach can be useful when you need to perform the some JavaScript-based logic before navigating, or when you want control over the navigation process.
Syntax
<button onclick="location.href='destination.html'">Button Text</button>
Example: Below is the example demonstrating <button> tag with javaScript, here onclick event attribute is used where location.href property is used to change the current URL to specified URL.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Page 1</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>This is Page 1</h2>
<button onclick="
location.href='page.html'">
Go to Page 2</button>
</body>
</html>
<!-- page.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Page 2</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks</h1>
<h2>This is Page 2</h2>
<p><a href="index.html">
Go back to Page 1</a></p>
</body>
</html>
Output
Similar Reads
How To Link Pages In HTML?
In HTML, linking pages is the fundamental practice that allows users to navigate from one web page to the another within same website or to an entirely different website. These links, also known as hyperlinks, are created using the <a> tag, which can direct the users to another HTML document,
5 min read
How to link jQuery in HTML page ?
jQuery is one of the most popularly used JavaScript Libraries out there which is a lot easier to use than standard JavaScript as it provides many built-in functions to access. It is build using JavaScript capabilities, you are able to use all the functions that are available in JavaScript. In this a
3 min read
How to Create Links to Other Pages in HTML ?
HTML links are like pathways on the internet. They connect one webpage to another. Imagine a link as having two parts: a starting point (where you click) and an endpoint (where you end up). When you click on a link, you're basically starting at one point (the anchor) and moving to another (the desti
2 min read
How to Link a Button to Another Page in HTML?
Linking a button to another page is a common requirement in web development. It can allow the users to navigate between a website's different sections or pages. This can be done using the various HTML elements.PrerequisitesHTMLCSS1. Using <a> Tag Styled as ButtonThe <a> tag is traditiona
3 min read
How to use anchor tag to open links in HTML ?
In this article, we will learn how to use anchor tags to open links in HTML and we will implement different operations using anchor tags in HTML. We will see in this article, how to redirect another website through an anchor tag and how to open a blank new tag for any new link to open an image in a
3 min read
How to Change the Target of a Link in HTML ?
In HTML, for changing the target of a link we can use the target attribute in the <a> anchor tag. This attribute mainly specifies where the linked content should be displayed. Below are the approaches that can be used to change the target link in HTML: Table of Content Using target Attribute O
3 min read
How to Link a CSS to HTML?
To link a CSS file to an HTML file, Create a separate CSS file (styles.css) and write styles on it. Now we need to use the <link> element inside the <head> section of the HTML file to attach the CSS file.Syntax:<link rel="stylesheet" href="styles.css">rel="stylesheet": It specifies
3 min read
How to Create a Link to Send Email in HTML ?
Incorporating email links into HTML pages facilitates a smooth way for users to send a message directly from the webpage. We will see how to create these email links, making your web pages user-friendly and interactive. Table of Content Using Mailto Protocol with Predefined SubjectCreating Link to s
2 min read
How to Make Visited Link Unvisited in HTML ?
When users interact with links on a webpage, then their browsers keep track of the state of these links. Understanding and managing these states can be a crucial task. We will focus on how to make a visited link appear unvisited again using HTML. ApproachFirst, create a basic structure with differen
2 min read
How to use PHP in HTML ?
In this article, we will use PHP in HTML. There are various methods to integrate PHP and HTML, some of them are discussed below. You can add PHP tags to your HTML Page. You simply need to enclose the PHP code with the PHP starts tag <?php and the PHP end tag ?>. The code wrapped between these
2 min read