How to open link in new tab html

HtmlHow-ToBeginner · 3 min read

How to Open Link in New Tab in HTML: Simple Guide

To open a link in a new tab in HTML, use the <a> tag with the attribute target="_blank". This tells the browser to open the linked page in a new browser tab or window.

📐

Syntax

The basic syntax to open a link in a new tab uses the <a> tag with the href attribute for the URL and the target="_blank" attribute to open the link in a new tab.

<a>: Defines a hyperlink.
href: Specifies the URL of the page the link goes to.
target="_blank": Opens the link in a new tab or window.

html

<a href="https://example.com" target="_blank">Visit Example</a>

Output

A clickable link labeled 'Visit Example' that opens https://example.com in a new browser tab.

💻

Example

This example shows a link that opens the Mozilla website in a new tab when clicked. It also includes rel="noopener noreferrer" for security and performance reasons.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Link in New Tab Example</title>
</head>
<body>
  <p>Click the link below to open Mozilla in a new tab:</p>
  <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Website</a>
</body>
</html>

Output

A webpage with a paragraph and a link labeled 'Mozilla Website'. Clicking the link opens https://www.mozilla.org in a new browser tab.

⚠️

Common Pitfalls

One common mistake is forgetting to add target="_blank", which opens the link in the same tab instead of a new one. Another important issue is missing the rel="noopener noreferrer" attribute, which can cause security risks like allowing the new page to access the original page via JavaScript.

Always add rel="noopener noreferrer" when using target="_blank" to protect your site and improve performance.

html

<!-- Wrong way: opens in new tab but missing security -->
<a href="https://example.com" target="_blank">Unsafe Link</a>

<!-- Right way: opens in new tab with security -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Safe Link</a>

Output

Two links labeled 'Unsafe Link' and 'Safe Link'. Both open in new tabs, but the second link includes security attributes.

📊

Quick Reference

Attribute	Purpose	Example
href	URL to open	Link
target="_blank"	Open link in new tab	Link
rel="noopener noreferrer"	Security for new tab links	Link

✅

Key Takeaways

Use target="_blank" in the <a> tag to open links in a new tab.

Always add rel="noopener noreferrer" with target="_blank" for security.

Without target="_blank", links open in the same tab by default.

The href attribute must contain the full URL or path to the page.

Opening links in new tabs improves user experience when linking to external sites.