How To Link Pages In HTML?
Last Updated :
09 Sep, 2024
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, an external site, a section within the same page, an email address, or other types of resources.
Prerequisites
There are several approaches to create links in HTML:
Linking to the Another Web Page
This is the most common type of link, which can allow you to navigate from one web page to another page. These links can point to other pages within the same website or to external websites. They can use the <a> tag with the href attribute to specify the destination URL.
Syntax:
<a href="URL">Link Text</a>
- URL: The destination URL. it can be absolute or relative.
- Link Text: The clickable text that will appear on the web page.
Example: In this example, the anchor (<a>) tag can be used to create the link that takes the user to the blog page of the external website, example.com. The link text is "Visit Our Blog," which is what users will see and click on. When clicked, the browser navigates to https://www.geekforgeeks.org.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Linking to Another
Web Page</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<p>Click the link below to
visit our blog:</p>
<a href="
https://www.geeksforgeeks.org/">
Visit Our GeeksforGeeks Blog
</a>
</body>
</html>
Output: When the Visit Our Blog link can be clicked then the browser navigates to https://www.geekforgeeks.org website.
Linking to the Section of the Same Page
It is also known as the anchor links or bookmarks, these links can allow you to navigate to the specific section within the same page. It can be particularly useful for the long pages where you want to provide the quick navigation to the different sections.
Syntax:
<a href="#section-id">Link Text</a>
Example: In this example, the link <a href="#contact">Go to Contact Section</a> points to the section with the ID contact. When the user clicks on the link then the page will scroll down to the "Contact Us" section, which is marked by <h2 id="contact">Contact Us</h2>.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Anchor Link Example</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>Welcome to Our Page</h2>
<p>Click the link below to go to
the contact section:</p>
<a href="#contact">
Go to Contact Section</a>
<!-- Content -->
<div style="height: 800px;"></div>
<!-- Just to create some space -->
<!-- Target Section -->
<h2 id="contact">Contact Us</h2>
<p>Feel free to reach out via our
contact form or by phone.</p>
</body>
</html>
Output: Clicking the Go to Contact Section link will scroll the page down to the Contact Us section.
Linking to an Email Address
These links can use the mailto: protocal to open the users default email client and start the new email with the specified recipient address. It can be useful for the contact links that automatically open the email editor.
Syntax:
<a href="mailto:[email protected]">Send Email</a>
Example: In this example, when users can click the "Email Support" link, their default email client opens with the "To" field pre-filled with [email protected]. The mailto: protocol handles this behavior.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Email Link Example
</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>Contact Us</h2>
<p>For more information,
please send us an email:</p>
<a href="
mailto:[email protected]">
Email Support</a>
</body>
</html>
Output: Clicking the Email Support link will open the default email client with the new email window and the to field to filled with [email protected].
Output of Linking to an Email AddressLinking to the File
Link to the files are used when you want to provide the downloadable content, such as the PDFs, images, or documents. The user can click on the link to view or download the file. The download attribute can be added to the ensure the file can be downloaded instead of the open in the browser.
Syntax:
<a href="path/to/file.ext" download>Download File</a>
Example: In this example, the anchor tag links to the GIF file (gfg1.gfg). The download attribute can be used to make sure the file can be downloaded to the user device instead of opening the browser. When the user click on the "Download User Guide," the file will be downloaded.
HTML
<!DOCTYPE html>
<html>
<head>
<title>File Download Link
Example</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<h2>Download Our PDF Guide</h2>
<p>Click the link below to
download our user guide:</p>
<a href="gfg1.gif" download>
Download User Guide</a>
</body>
</html>
Output:
Linking to the JavaScript Function
Links can be used to trigger JavaScript functions. This is useful for the interactive web pages where you want to execute the some client-side script when the link is clicked. The javaScript protocal can be used in the href attribute of the <a> tag. It can be invokes the JavaScript function directly from the Link.
Syntax:
<a href="javascript:functionName()">Link Text</a>
Example: In this example, the <a href="javascript:showAlert()">Show Alert</a> can calls the JavaScript function showAlert()> When the user clicks the link, a pop-up alert box with the message "Hello! This is a JavaScript alert." will appear on the screen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Link Example
</title>
<script>
function showAlert() {
alert('Hello! This is a JavaScript alert.');
}
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>JavaScript Link Example</h2>
<p>Click the link below to trigger a JavaScript alert:</p>
<a href="javascript:showAlert()">Show Alert</a>
</body>
</html>
Output: Clicking the Show Alert link will display the JavaScript alert box with the message "Hello! this a javaScript alert.".
Similar Reads
How To Link Two Pages In HTML ?
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
3 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 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 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 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
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 Add Map in HTML?
When building websites, including a map is often necessary to display important locations, such as office addresses, at the footer or on dedicated pages. Adding a map enhances user experience, making it easier for users to locate your business or other important points of interest.PrerequisitesBasic
3 min read
How to Create Mail and Phone Link in HTML?
The HTML provides mailto and tel attributes to create the mail and phone links. We can use them in href to create the links. The href provides other sub-attributes that define the other properties of the mailto and phone link. Creating a Mailto LinkA mailto link is an easy way for users to contact w
2 min read