HTML Academy · Lesson

Opening Links in New Tabs and Download Attribute

Use target and download attributes for link behavior.

Opening Links in New Tabs and Download Attribute is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Opening in a New Tab

The target attribute controls where the linked document opens:

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

The Security Risk of _blank

target="_blank" without precautions creates a security vulnerability:

The new page can access the opener via window.opener
A malicious page could redirect the original tab
This attack is called reverse tabnapping

rel=noopener noreferrer

Always add rel="noopener noreferrer" when using target="_blank":

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

When to Open New Tabs

UX guidelines for target="_blank":

Use for external sites where users do not expect to leave your app
Use for reference documents (PDFs, guides)
Do not use for internal page navigation
Always warn users — add an icon or title saying "opens in new tab"

Indicating New Tab to Users

Inform users the link opens in a new tab:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

The download Attribute

The download attribute tells the browser to download the linked file instead of navigating to it:

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

download Attribute Constraints

The download attribute has restrictions:

Only works for same-origin URLs
Cross-origin downloads require the server to send Content-Disposition: attachment
The filename in download is a suggestion — server headers can override it

Data URI Downloads

You can download generated content using data URIs:

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript and Link Targets

When JavaScript handles navigation, avoid target="_blank" abuse:

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Ping Attribute

The ping attribute sends a POST request when the link is clicked (for analytics):

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

type Attribute on Links

The type attribute hints at the MIME type of the linked resource:

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Quick Check

What security attribute should always accompany target="_blank"?

Recap: target and download

Link behavior attributes:

target="_blank" — opens in new tab
Always add rel="noopener noreferrer" with _blank
Warn users visually when a link opens in a new tab
download — triggers file download instead of navigation
download="filename" — suggests a filename for the download

Frequently asked questions

Is the “Opening Links in New Tabs and Download Attribute” lesson free?

Yes — the full text of “Opening Links in New Tabs and Download Attribute” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Opening Links in New Tabs and Download Attribute”?

Use target and download attributes for link behavior. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Opening Links in New Tabs and Download Attribute” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

The anchor Element and href Attribute
Absolute vs Relative URLs
Opening Links in New Tabs and Download Attribute
Linking to Sections Fragment Identifiers

← Back to HTML Academy