How to Create Links to Other Pages in HTML ?

Last Updated : 01 Apr, 2024

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 destination). These links are made using anchor tags in HTML, which have a special attribute called "href" that tells your browser where to go when you click the link. Links can take you to other websites or different parts of the same page, making websites more interactive.

Approach

It's important to note that a link doesn't have to be just text. it can also be an image or any other thing you see on a webpage.

When you see links in a browser, they often have different looks:

A link you haven't clicked yet is usually blue and underlined.
If you've already clicked on a link, it might be purple and underlined.
Sometimes, when you're clicking on a link, it might briefly turn red and underlined to show it's active.
We will going to create link of all types.

Syntax:

<a href="url">link text</a>

target Attribute

`_blank`: This makes the linked document open in a new window or tab.
`_self`: It opens the linked document in the same window or tab as the link. This is the default behavior.
`_parent`: If your webpage has frames, this option opens the linked document in the parent frame.
`_top`: It opens the linked document in the whole window, replacing all frames.
`framename`: If you have named a frame in your HTML, you can specify it here, and the linked document will open in that frame.

Example: This example demonstrates different target attributes for links, allowing them to open in various contexts such as new windows, the same window, parent frames, or specific frames within a page.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Target Attribute Example</title>
</head>

<body>
    <a href="https://www.geeksforgeeks.org" target="_blank">
        Open GeeksforGeeks in a new window or tab</a>
    <br>
    <a href="https://www.geeksforgeeks.org" target="_self">
        Open GeeksforGeeks in the same window or tab</a>
    <br>
    <a href="https://www.geeksforgeeks.org" target="_parent">
        Open GeeksforGeeks in the parent frame</a>
    <br>
    <a href="https://www.geeksforgeeks.org" target="_top">
        Open GeeksforGeeks in the full body of the window</a>
    <br>
    <!-- Assuming there's a frame named 'myFrame' -->
    <a href="https://www.geeksforgeeks.org" target="myFrame">
        Open GeeksforGeeks in 'myFrame'</a>
</body>

</html>