Link targets
Control where a link opens with the target and rel attributes.
What does the target attribute do?
The target attribute controls where a link opens. The default value is _self, which opens the link in the same tab. To open in a new tab you write target="_blank".
A new tab is often used for external links to keep the reader on your page. But opening every link in a new tab fragments the experience and piles up tabs, so use it in moderation.
Why does rel=noopener matter?
A new tab opened with target="_blank" once gave the opened page some access to the opener, due to old security flaws. To block this, you add rel="noopener", which cuts the new tab's access to the opening page.
For external links, target="_blank" and rel="noopener" are usually written together. Modern browsers apply this protection by default, but writing it explicitly keeps older browsers safe too.
Exercise Open an external link safely in a new tab.
Add an external link to the skeleton: it should go to https://archive-library.example, open in a new tab, and be safe with rel="noopener". The anchor text should be "Archive".
Show example solution
<h1>Çamlık Library</h1>
<p>External resources:</p>
<a href="https://archive-library.example" target="_blank" rel="noopener">Archive</a>Target and safety together
target controls where a link opens, while rel controls the relationship with the opened page. Adding rel="noopener" when you open a new tab is a small but important habit.
Writing the two together for external links keeps the reader on your page while preserving safety. The next lesson shows how to build links for email and phone.
Test yourself
-
What target value opens a link in a new tab?
- _blank
- _self
- _new
- _tab
Show answer
_blank — Correct. _blank is the standard value for a new tab.
-
Complete the external link safely.
<a href="https://archive-library.example" target="_blank" rel="____">Go to the archive</a>Show answer
<a href="https://archive-library.example" target="_blank" rel="noopener">Go to the archive</a> -
Match target and rel values.
- _self
- Open in the same tab
- _blank
- Open in a new tab
- noopener
- Cut access
- target
- Set where it opens