Link Targets

HTML links and media

Link targets decide where a link opens and how safe it is.

The target attribute controls where a linked page opens. The most common value is _blank, which opens a new tab or window.

Opening new tabs can be useful for external resources, documents or references, but it should not be the default for every link. Users often expect normal navigation unless there is a clear reason.

Whenever you use target="_blank", also use rel="noopener" to protect the original page from the new page.

target="_self"

Default behavior: open in the current browsing context.

target="_blank"

Open in a new tab or window.

rel="noopener"

Prevents the new page from controlling the original page.

download

Hints that the linked resource should be downloaded.

Syntax and structure

New-tab links need a relationship attribute.

The target attribute changes behavior. The rel attribute explains the relationship and can improve security.

External link with protection

<a
  href="https://developer.mozilla.org/"
  target="_blank"
  rel="noopener"
>
  Open MDN Web Docs
</a>

<a href="/downloads/html-checklist.pdf" download>
  Download the HTML checklist
</a>

New tab without protection

<a href="https://example.com" target="_blank">External site</a>
<a href="/about.php" target="_blank">About us</a>
<a href="file.pdf">click</a>

Rules that matter

Links and media should be useful, stable and understandable.

Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.

Use _blank with intent

Open a new tab only when it helps the user keep the current page.

Always add noopener

Use rel="noopener" on target="_blank" links.

Describe downloads

If a link downloads a file, say what the file is.

Keep internal navigation normal

Most internal links should open in the same tab.

Do not surprise users

Unexpected new tabs can feel messy, especially on mobile.

Use noreferrer only when needed

noreferrer also hides referrer data, which may affect analytics.

Production thinking

Navigation, images and metadata are part of product quality.

Why does this matter?

This matters because a link is a promise. If it opens somewhere unexpected or creates a security issue, the page feels less professional.

Accessibility

If a link opens a new tab or downloads a file, clear link text helps users understand the behavior before activating it.

Production note

Audit external links. New-tab behavior, rel values and downloadable files should be consistent across the site.

SEO note

Target does not make a link stronger for SEO. Clear internal linking and natural anchor text matter more.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Remove rel="noopener" once and then add it back.
Change the internal link so it opens normally in the same tab.
Rewrite the download link text so it names the file type.

Practice assignment

Do this before moving to the next lesson.

Create one internal link, one protected external link and one download link.
Explain why each target behavior is useful.
Check that every target="_blank" link includes rel="noopener".

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(780px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.eyebrow {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 10px 0 16px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

p, figcaption {
  color: #cfd8e6;
  line-height: 1.7;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

a {
  color: #8cffc1;
  font-weight: 800;
}

nav a {
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.result-note {
  margin-top: 14px;
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(140, 255, 193, 0.1);
}

.demo-highlight {
  outline: 3px solid rgba(140, 255, 193, 0.55);
  outline-offset: 4px;
}

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?