How to Create a Hyperlink in HTML ?

Last Updated : 19 Mar, 2024

Hyperlinks in HTML are the redirection attributes through which users can navigate to different internal application pages or the external websites allowed in the application. We can create a hyperlink in HTML using a standard anchor tag (<a> tag). Additionally, we can use HTML DOM Window.location property to create HTML hyperlinks.

These are the following approaches:

Table of Content

Using <a>Tag
Using HTML DOM Window.location Property

Using <a>Tag

In this approach, we are using the <a> (anchor) tag to create a hyperlink. The href attribute within the <a> tag specifies the destination URL, allowing us to navigate to “https://www.geeksforgeeks.org/” by clicking the “Visit GeeksforGeeks” link.

Syntax:

<a href = "link"> Link Name </a>

Example: The below example uses <a> Tag to create a hyperlink in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Hyperlink Example</title>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h3>Approach 1: Using &lt;a&gt; Tag</h3>
    
    <a href="https://www.geeksforgeeks.org/">
        Visit GeeksforGeeks
    </a>
</body>

</html>

Output:

Output

Using HTML DOM Window.location Property

In this approach, we are using the HTML DOM window.location property to dynamically set the browser’s current location. By assigning the URL “https://www.geeksforgeeks.org/” to window.location.href within the button’s onclick event, clicking the button triggers a redirection, providing a hyperlink-like functionality for “Visit GeeksforGeeks.“

Syntax:

window.location.href='link'

Example: The below example uses an HTML DOM Window.location property to create a hyperlink in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Hyperlink Example</title>

    <style>
        button {
            background: none;
            border: none;
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        button:hover {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h3>
        Approach 2: Using HTML DOM Window.location Property
    </h3>
    
    <button onclick="window.location.href='https://www.geeksforgeeks.org/'">
        Visit GeeksforGeeks
    </button>
</body>

</html>