Open In App

HTML Links Hyperlinks

Improve
Improve
Like Article
Like
Save
Share
Report

HTML Links are connections from one web resource to another. A link has two ends, An anchor and a direction.

The link starts at the “source” anchor and points to the “destination” anchor, Anchor tags have an href attribute specifying the destination URL. Links can lead to external sites or different sections within the same page, enhancing website interactivity.

Note: A hyperlink can be represented by an image or any other HTML element, not just text.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Syntax:

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

target Attribute:

AttributeDescription
_blankOpens the linked document in a new window or tab.
_selfOpens the linked document in the same frame or window as the link. (Default behavior)
_parentOpens the linked document in the parent frame.
_topOpens the linked document in the full body of the window.
framenameOpens the linked document in a specified frame. The frame’s name is specified in the attribute.

HTML Links Examples

Example 1: In this example we contains a paragraph instructing users to click on the link labeled “GeeksforGeeks,” which directs to the website “https://www.geeksforgeeks.org”.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Links</title>
    </head>

    <body>
        <p>Click on the following link</p>
        <a href="https://www.geeksforgeeks.org"
            >GeeksforGeeks</a
        >
    </body>
</html>

Output:

HtmlLinks

HTML Links example output

Example 2: In this example we demonstrates the use of target attributes in links. Each link opens in a different context: _blank opens in a new window or tab, _self in the same frame, _parent in the parent frame, _top in the full window body, and framename in a specified frame.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Target Attribute Example</title>
    </head>

    <body>
        <h3>
            Various options available in the
            Target Attribute
        </h3>

        <p>
            If you set the target attribute to
            "_blank", the link will open in a new
            browser window or tab.
        </p>
        <a
            href="https://www.geeksforgeeks.org"
            target="_blank"
        >
            GeeksforGeeks
        </a>

        <p>
            If you set the target attribute to
            "_self", the link will open in the
            same window or tab.
        </p>
        <a
            href="https://www.geeksforgeeks.org"
            target="_self"
        >
            GeeksforGeeks
        </a>

        <p>
            If you set the target attribute to
            "_top", the link will open in the full
            body of the window.
        </p>
        <a
            href="https://www.geeksforgeeks.org"
            target="_top"
        >
            GeeksforGeeks
        </a>

        <p>
            If you set the target attribute to
            "_parent", the link will open in the
            parent frame.
        </p>
        <a
            href="https://www.geeksforgeeks.org"
            target="_parent"
        >
            GeeksforGeeks
        </a>
    </body>
</html>

Output: 

linksOP2

Supported Browser



Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads