Opening Links in New Tabs: The Target Attribute

If you’ve ever clicked a link and it opened in a new tab, you’ve already seen the target attribute in action. In this article, you’ll learn exactly how to make your own links do the same thing using simple HTML.

We’ll walk through what the target attribute is, how to use it safely, and give you small, practical code examples you can try right away. No previous coding experience is needed—just curiosity and a little patience.

What is the target attribute?

In HTML (the language used to build web pages), links are created with the <a> tag. The target attribute is an extra setting you can add to a link to control where the page opens when someone clicks it.

The most common value is:

target="_blank" — opens the link in a new tab (or new window, depending on the browser settings)

We’ll focus on that one in this article, because it’s the one you’ll use most often when you want to keep visitors on your page while letting them explore another link.

Basic link: starting from zero

Let’s start with the simplest HTML link, without any target attribute.

<!-- A simple link that opens in the same tab -->
<a href="https://www.example.com">Visit Example</a>

What each part means:

<a> — the anchor tag, used for links.
href="https://www.example.com" — the destination of the link (where it goes).
Visit Example — the text people click on.
</a> — closes the link tag.

What happens when you click it?

The browser loads https://www.example.com in the same tab, replacing the current page.

Try it yourself

Open a text editor (Notepad, VS Code, or any simple editor).
Paste this code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Link</title>
  </head>
  <body>
    <p>Here is my first link:</p>
    <a href="https://www.example.com">Visit Example</a>
  </body>
</html>

Save the file as link-basic.html.
Open the file in your browser (double-click it).
Click the link and see how it opens in the same tab.

If you got that working, that’s already a win—you’ve created a real HTML link!

Adding target="_blank": open in a new tab

Now let’s make that same link open in a new tab instead of the same one. You do this by adding the target attribute with the value _blank.

<!-- A link that opens in a new tab -->
<a href="https://www.example.com" target="_blank">Visit Example in a new tab</a>

What changed?

target="_blank" tells the browser: “Don’t replace this page. Open the link in a new tab (or window).”

Try it yourself

Update your file to include both versions so you can compare:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Open in New Tab Example</title>
  </head>
  <body>
    <p>Same tab link:</p>
    <a href="https://www.example.com">Visit Example (same tab)</a>

    <hr>

    <p>New tab link:</p>
    <a href="https://www.example.com" target="_blank">
      Visit Example (new tab)
    </a>
  </body>
</html>

Reload the page in your browser and click each link. You should see one replace the current page, and the other open a fresh tab.

If you see a new tab appear, you’ve successfully used the target attribute.

Making it safer: rel="noopener noreferrer"

When you open links in new tabs using target="_blank", there’s a small security and performance concern. The new page can access a bit of information about the page that opened it.

The modern best practice is to always add this extra attribute when using target="_blank":

rel="noopener noreferrer"

You don’t need to fully understand the technical details yet. For now, remember this simple rule:

When you use target="_blank", also add rel="noopener noreferrer".

Here’s the improved version of our link:

<!-- Safer link that opens in a new tab -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visit Example (new tab, safer)
</a>

What each part does:

rel — describes the relationship between your page and the page you’re linking to.
noopener — stops the new page from being able to control the original page.
noreferrer — prevents some information (the “referrer”) from being passed to the new page.

Try it yourself

Update your file again:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Safe New Tab Links</title>
  </head>
  <body>
    <p>Safe link in a new tab:</p>
    <a href="https://www.example.com"
       target="_blank"
       rel="noopener noreferrer">
      Visit Example (recommended version)
    </a>
  </body>
</html>

Functionally, it will behave the same for you: it still opens in a new tab. Behind the scenes, though, it’s a bit safer and more privacy-friendly.

When should you open links in new tabs?

Just because you can open links in new tabs doesn’t mean you always should. Here are some common, beginner-friendly guidelines:

Use target="_blank" when:

You’re linking to external websites (other sites, not your own).
You don’t want users to lose their place on your site.
You’re linking to a PDF, document, or file that might take time to load.

Avoid target="_blank" when:

You’re linking between pages within your own site (like from Home to About).
Users might prefer to use their own browser controls (right-click → “Open link in new tab”).

A simple rule of thumb: if leaving your site might be confusing or annoying, a new tab is often helpful. Otherwise, let the link open in the same tab.

Multiple links with different behaviors (practice example)

Let’s put everything together in a small practice page with several links:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Link Practice</title>
  </head>
  <body>
    <h1>My Link Practice Page</h1>

    <!-- Internal link: same tab -->
    <p>About my site (same tab):</p>
    <a href="about.html">Go to About Page</a>

    <hr>

    <!-- External link: new tab, safer -->
    <p>Visit an external site (new tab):</p>
    <a href="https://www.example.com"
       target="_blank"
       rel="noopener noreferrer">
      Visit Example.com
    </a>

    <hr>

    <!-- Download or document: new tab -->
    <p>Open a PDF guide (new tab):</p>
    <a href="guide.pdf" target="_blank" rel="noopener noreferrer">
      Read the PDF Guide
    </a>
  </body>
</html>

What you’ll see:

Clicking Go to About Page will try to open about.html in the **same tab** (you can create a simple about.html` file later).
Clicking Visit Example.com opens a new tab with example.com.
Clicking Read the PDF Guide opens guide.pdf in a new tab (if it exists).

This small page already shows a realistic way links behave on many websites.

Try it yourself

Create a folder on your computer, for example: my-links.
Inside it, create a file called index.html with the code above.
(Optional) Create a simple about.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>About</title>
  </head>
  <body>
    <h1>About This Site</h1>
    <p>This is my practice site for learning links.</p>
  </body>
</html>

Open index.html in your browser and click around.

You’ve just built a mini site with different link behaviors—nicely done.

Quick recap: key takeaways

Use the <a> tag to create links: <a href="URL">Text</a>.
By default, links open in the same tab.
Add target="_blank" to open a link in a new tab.
For safety and privacy, pair it with rel="noopener noreferrer".
Use new tabs mostly for external sites and documents, not for every link.

Learning HTML is a bit like learning a new set of Lego pieces—each small part might seem simple, but together they can build entire sites. You’ve just mastered one very common piece: the target attribute.

Next, you might explore adding titles to links, styling them with CSS, or creating a small navigation menu. Keep experimenting, keep breaking things (in your test files), and celebrate each small step forward—you’re learning to code.

Mudzinga