HTMLmarkup~8 mins

Opening links in new tab in HTML - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Opening links in new tab

[Read <a>] -> [Create anchor node] -> [Read href attribute] -> [Read target attribute] -> [Render link text] -> [User clicks link] -> [Open URL in new tab if target="_blank"]

The browser reads the anchor tag and its attributes, then renders the link text. When clicked, if the target attribute is '_blank', the browser opens the link in a new tab.

Render Steps - 3 Steps

Code Added:<a href="https://example.com">Visit Example.com</a>

Before

[Empty page]

→

After

[Visit Example.com]

The browser renders a clickable link with the text 'Visit Example.com'. Clicking it will open the link in the same tab by default.

🔧 Browser Action:Creates anchor element in DOM and paints link text

Code Sample

A simple webpage with a link that opens https://example.com 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>Link Example</title>
</head>
<body>
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>
</body>
</html>

Render Quiz - 3 Questions

Test your understanding

After applying step 2, what happens when you click the link?

AThe link opens in the same tab

BThe link does nothing

CThe link opens in a new browser tab

DThe link downloads a file

Common Confusions - 2 Topics

Why does my link open in the same tab even though I added target="_blank"?

Sometimes browser settings or extensions can override this behavior. Also, if the target attribute is misspelled or missing the underscore, it won't work. Check that target="_blank" is exactly correct.

💡 Always use target="_blank" with the underscore to open links in new tabs.

Why should I add rel="noopener noreferrer" when using target="_blank"?

Without rel="noopener noreferrer", the new tab can access the original page via JavaScript, which can be a security risk. Adding it prevents this and protects your page.

💡 Add rel="noopener noreferrer" for safer new tab links.

Property Reference

Attribute	Value	Effect on Link Behavior	Visual Change
href	URL	Sets the destination URL of the link	No visual change, link text appears
target	_blank	Opens the link in a new tab or window	No visual change
target	_self	Opens the link in the same tab (default)	No visual change
rel	noopener noreferrer	Improves security when opening new tabs	No visual change

Concept Snapshot

Use <a href="URL" target="_blank" rel="noopener noreferrer"> to create links that open in a new tab. - href sets the link destination. - target="_blank" opens link in new tab. - rel="noopener noreferrer" improves security. - No visual change when adding target or rel. - Always include rel with target="_blank" for safety.