How to use target Attribute Only In HTML

In this approach, we are using the HTML target attribute to control the behavior of hyperlinks. You can specify different values for this attribute to open the provided link at different locations.

Syntax:

<a href="https://www.w3wiki.netlink" target="_blank" class="link">
    Open in New Frame (Tab)
</a>

Example: The below example uses the target attribute to change the target of a link in HTML.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Exampl 1</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
        }

        .link {
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
            padding: 10px 20px;
            border: 2px solid #db3434;
            border-radius: 5px;
            display: inline-block;
            margin-top: 20px;
            transition: background-color 0.3s;
        }

        .link:hover {
            background-color: #34db6c;
            color: #fff;
        }

        .frame-container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .frame {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        w3wiki
    </h1>
    <h3>
        Using target Attribute Only
    </h3>
    <a target="_self" href=
"https://media.w3wiki.org/wp-content/uploads/20240108102825/mern.mp4"
        class="link">
        Open in Same Frame [Tab]
    </a>
    <a target="myFrame" href=
"https://media.w3wiki.org/wp-content/uploads/20240108102825/mern.mp4"
        class="link">
        Open in Named Frame [Same Screen]
    </a>
    <a target="_blank" href=
"https://media.w3wiki.org/wp-content/uploads/20240108102825/mern.mp4"
        class="link">
        Open in New Frame [Tab]
    </a>
    <div class="frame-container" style="text-align: center;">
        <iframe name="myFrame" class="frame" src="about:blank"></iframe>
    </div>
</body>

</html>

Output:

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 Only
Using JavaScript to change target

Content:

How to use target Attribute Only In HTML

Syntax:

How to Change the Target of a Link in HTML ?

Similar Reads