MakeW3web

Link Targets

Link targets in HTML determine where a hyperlink should open the destination page or resource. The `target` attribute of the `<a>` element is used to specify the link target. The most common link targets are:

  1. `_self` (default): Opens the link in the same frame or window as the current page. This is the default behavior if the `target` attribute is not specified.

Example:

<a href="https://www.example.com" target="_self">Open Example.com in the same window</a>
  1. `_blank`: Opens the link in a new tab or window, depending on the browser's settings.

Example:

<a href="https://www.example.com" target="_blank">Open Example.com in a new tab</a>
  1. `_parent`: Opens the link in the parent frame of the current frame. If there is no parent frame, this target behaves like `_self`.
Example (assuming the current page is within an `<iframe>` element):
<a href="https://www.example.com" target="_parent">Open Example.com in the parent frame</a>
  1. `_top`: Opens the link in the topmost window or frame, breaking out of any nested frames. If there are no nested frames, this target behaves like `_self`.
Example (assuming the current page is within nested `<iframe>` elements):
<a href="https://www.example.com" target="_top">Open Example.com in the topmost window</a>
  1. Frame name: You can also specify the name of a frame as the target, in which case the link will open in that frame. This is mostly used with the `<frameset>` and `<frame>` elements, which are now deprecated in HTML5.
Example (assuming there is a frame with the name "myFrame"):
<a href="https://www.example.com" target="myFrame">Open Example.com in the frame named "myFrame"</a>

Here's a combined example demonstrating all link target types:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link Targets Example</title>
</head>
<body>
    <h1>HTML Link Targets</h1>
    
    <p><a href="https://www.example.com" target="_self">Open Example.com in the same window (_self)</a></p>
    
    <p><a href="https://www.example.com" target="_blank">Open Example.com in a new tab (_blank)</a></p>
    
    <p><a href="https://www.example.com" target="_parent">Open Example.com in the parent frame (_parent)</a></p>
    
    <p><a href="https://www.example.com" target="_top">Open Example.com in the topmost window (_top)</a></p>
    
    <!-- Create an iframe with the name "myFrame" -->
    <iframe src="about:blank" name="myFrame" style="width: 100%; height: 200px; border: 1px solid black;"></iframe>
    
    <!-- Link to open Example.com in the "myFrame" iframe -->
    <p><a href="https://www.example.com" target="myFrame">Open Example.com in the frame named "myFrame"</a></p>
</body>
</html>

By understanding and using different link targets, you can control how destination pages or resources are opened and provide a better user experience. Keep in mind that opening too many new tabs or windows can be disorienting for users, so use link targets judiciously.

Was this page helpful?