0
0
HTMLmarkup~5 mins

Opening links in new tab in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction
Opening links in a new tab lets users keep the current page open while exploring other pages.
When you want users to visit external websites without leaving your site.
When linking to documents or resources that users might want to keep open.
When you want to keep your website visible while users check related information.
When linking to long articles or references that users might want to read alongside your page.
Syntax
HTML
<a href="URL" target="_blank" rel="noopener noreferrer">Link text</a>
The target="_blank" attribute tells the browser to open the link in a new tab.
Always add rel="noopener noreferrer" for security and performance when using target="_blank".
Examples
Opens the link in a new tab safely.
HTML
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
Opens a local page in a new tab.
HTML
<a href="page.html" target="_blank" rel="noopener noreferrer">Open Page</a>
Sample Program
This page shows a link that opens Wikipedia in a new browser tab when clicked.
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</title>
</head>
<body>
  <p>Click the link below to open it in a new tab:</p>
  <a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Go to Wikipedia</a>
</body>
</html>
OutputSuccess
Important Notes
Using rel="noopener noreferrer" prevents the new page from controlling your page and improves security.
Opening too many links in new tabs can confuse users; use this feature thoughtfully.
Test your links in different browsers to ensure they open as expected.
Summary
Use target="_blank" to open links in new tabs.
Add rel="noopener noreferrer" for security.
Opening links in new tabs helps users keep your site open while exploring.