How to Open an HTML Link in a New Tab

HTML anchor with href and target blank for opening a link in a new tab

To open an HTML link in a new tab, add the target=”_blank” attribute to a normal anchor. Keep the destination in href, then place the visible link text between the opening and closing a tags. This pattern requests a new browsing context without JavaScript and works for ordinary text navigation.

The browser or the user’s settings ultimately determine whether that new context appears as a tab or a window. Therefore, target=”_blank” requests the behavior; it does not guarantee a particular piece of browser interface.

How to Open an HTML Link in a New Tab: The Complete Anchor Example

Use this complete anchor when the link should request a separate browsing context:

<a href=”https://example.com/resources” target=”_blank” rel=”noopener”>Open the resource</a>

The href attribute contains the destination URL. The target attribute controls where the browser requests that destination, and _blank names a new, unnamed browsing context. The words “Open the resource” become the clickable link text.

rel=”noopener” is a useful companion for links that open another document. It prevents the newly opened page from using the opener reference to interact with the original page. It does not create the new tab; target=”_blank” makes that request.

How Does target=”_blank” Change Navigation?

Without a target attribute, a link normally loads its href in the current browsing context. With target=”_blank”, the browser asks for a new top-level context instead. In common desktop configurations, that context appears as a new tab, while some configurations open a new window.

  • The original page remains available in its existing tab or window.
  • The destination loads in the newly requested context.
  • The browser may apply popup-blocking, tab preferences, or other user controls.

The keyword _blank does not force a physical tab. A browser or user setting ultimately decides whether the result is a tab or a window. Keyboard commands and accessibility preferences can also affect how a link opens. The HTML declares the requested browsing context, not the final interface choice.

How Do You Use an HTML href to Open a Link in a New Tab?

An href for a new tab is still an ordinary URL paired with target=”_blank”. Apply the same pattern to text links, product names, documentation references, or any other element that users expect to activate as a link:

<a href=”/documentation” target=”_blank” rel=”noopener”>Read the documentation</a>

For an image link, place the image element inside the anchor and keep the same attributes on the anchor:

<a href=”/gallery” target=”_blank” rel=”noopener”><img src=”/images/gallery-preview.jpg” alt=”View the image gallery”></a>

The image becomes clickable because it is nested inside the a element. Provide meaningful alt text so users who cannot see the image still understand the link’s purpose. The anchor’s href remains the destination, while its target requests the separate context.

When Is Same-Tab Navigation Clearer?

Same-tab navigation is often clearer when the destination is part of the same task or site journey. It preserves the browser’s normal back-button flow and avoids accumulating extra tabs. Omit the target attribute for the default behavior, or state it explicitly:

<a href=”/account” target=”_self”>Open your account</a>

  • Use same-tab navigation for related pages, form steps, account areas, and primary site content.
  • Request a new context for supporting resources that users may need to consult while keeping the current page open.
  • Describe the destination clearly so users can choose how they want to open it.

Use target=”_blank” deliberately rather than on every link. The clearer choice depends on whether preserving the current page helps the user complete the task.