HTML Base target Property: Setting Default Link Targets

Table of Contents

HTML `base target` Property: Setting Default Link Targets

The HTML <base> tag is used to specify a base URL and/or a default target for all relative URLs in a document. While the href attribute defines the base URL, the target attribute specifies the default browsing context (e.g., a new tab, the same frame, etc.) for all hyperlinks and form submissions on the page. This can be particularly useful when you want all links to open in a new tab or window by default.

Understanding the `base target` Property

The target attribute of the <base> tag provides a convenient way to control the default behavior of all hyperlinks on a page. Instead of adding the target attribute to each individual <a> tag, you can set it once in the <head> section using the <base> tag.

Syntax

The basic syntax for using the target attribute in the <base> tag is as follows:

<base target="_target_value">

Attribute Values

The target attribute can take one of the following values:

Value	Description
`_self`	Opens the linked document in the same frame as it was clicked (this is the default).
`_blank`	Opens the linked document in a new window or tab.
`_parent`	Opens the linked document in the parent frame.
`_top`	Opens the linked document in the full body of the window.
framename	Opens the linked document in the named frame.

Basic Example: Setting a Default Target

In this example, we set the default target for all links on the page to _blank, which means all links will open in a new tab or window.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML base target Example</title>
    <base target="_blank" />
  </head>
  <body>
    <h1>HTML base target Example</h1>
    <p>
      <a href="https://www.codelucky.com">CodeLucky</a> - This link will open in a
      new tab.
    </p>
    <p>
      <a href="https://www.google.com">Google</a> - This link will also open in a
      new tab.
    </p>
  </body>
</html>

Output:

When you click on either link, the linked page will open in a new tab or window.

Overriding the Default Target

It’s possible to override the default target set by the <base> tag by specifying a target attribute directly on the <a> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML base target Override Example</title>
    <base target="_blank" />
  </head>
  <body>
    <h1>HTML base target Override Example</h1>
    <p>
      <a href="https://www.codelucky.com">CodeLucky</a> - This link will open in a
      new tab because of base target.
    </p>
    <p>
      <a href="https://www.google.com" target="_self">Google</a> - This link will open
      in the same window, overriding the base target.
    </p>
  </body>
</html>

Output:

The “CodeLucky” link will open in a new tab, while the “Google” link will open in the same window.

Using `base target` with Frames

The _parent and _top values are commonly used in websites with frames. Here’s an example that demonstrates how they work:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML base target with Frames Example</title>
  </head>
  <body>
    <iframe src="frame1.html" width="400" height="300"></iframe>
  </body>
</html>

frame1.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Frame 1</title>
    <base target="_top" />
  </head>
  <body>
    <h1>Frame 1</h1>
    <p>
      <a href="https://www.codelucky.com">CodeLucky</a> - This link will open in
      the full window, breaking out of the frame.
    </p>
  </body>
</html>

Output:

When you click the link in frame1.html, it will open the CodeLucky website in the full browser window, replacing the frameset.

Practical Use Cases

Consistent Link Behavior: Ensuring all external links open in a new tab.
Legacy Websites with Frames: Managing link targets in older, frame-based websites.
Simplified Development: Avoiding repetitive target attributes on individual links.

Important Considerations 💡

Accessibility: Be mindful of accessibility. Opening links in new tabs without warning can be disorienting for some users. Consider providing a visual cue or warning.
User Experience: Use target="_blank" judiciously. Overuse can be annoying for users. Ensure it enhances, rather than detracts from, their experience.
SEO: While the target attribute itself doesn’t directly impact SEO, ensure that your overall linking strategy aligns with best practices.

Browser Support

The <base> tag and its target attribute are widely supported across all modern browsers.

| Browser | Version | Support |
| ————– | ——- | ——- |
| Chrome | All | Yes |
| Edge | All | Yes |
| Firefox | All | Yes |
| Safari | All | Yes |
| Opera | All | Yes |
| Internet Explorer | 9+ | Yes |

Conclusion

The HTML base target property provides a simple yet powerful way to manage the default link behavior across your entire web page. By setting a default target, you can ensure consistent and predictable navigation for your users, simplifying development and improving the overall user experience. However, always consider the implications for accessibility and user experience when deciding how to use this attribute.