Link Attributes in HTML

The anchor tag gets all the attention in tutorials. You learn <a href="...">, your link works, and you move on. But there are a few attributes that sit right next to href that most people gloss over, and those attributes handle things that genuinely matter. Security. SEO. File downloads. Where a link opens.

If you’ve gone through our anchor tags in HTML guide, you already know the building blocks. This article picks up right from there and goes deeper into the attributes that give your links real power: target, rel, and download.

Let’s get into it.

01What Are Link Attributes in HTML?

You know from our HTML tags, elements, and attributes guide that attributes are the extra information you add inside an opening tag. They configure how an element behaves.

For anchor tags, href is the main one, it tells the link where to go. But the other attributes tell the link how to behave when it gets there. That’s a different question, and it’s the one we’re answering today.

Here’s a full anchor tag with all three attributes we’re covering:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</a>

Three attributes, each doing a different job. Let’s break them down one by one.

02The target Attribute: Where Should This Link Open?

The target attribute tells the browser where to load the linked page. Without it, every link you click opens in the same tab, replacing whatever was there. Sometimes that’s exactly what you want. Sometimes it’s not.

Here’s the basic syntax:

<!-- Opens in the same tab (this is the default) -->
<a href="about.html" target="_self">About Us</a>

<!-- Opens in a new tab or window -->
<a href="https://github.com" target="_blank">View on GitHub</a>

<!-- Opens in the parent frame (used in iframes) -->
<a href="page.html" target="_parent">Go Up</a>

<!-- Opens in the full window, breaking out of all frames -->
<a href="page.html" target="_top">Break Out of Frames</a>

In day-to-day work, you’ll mostly deal with _self and _blank. The _parent and _top values are specifically for pages using <iframe> elements, which is a less common situation.

target=”_blank” in HTML: When to Use It and When to Skip It

target="_blank" is the one you’ll use the most. It opens the link in a new tab, which keeps the user on your page while they explore the linked resource.

That sounds simple enough, but there’s a real question here worth thinking about: should every external link open in a new tab?

Not necessarily. The general rule most developers follow is:

• Use target="_blank" for external links (taking users away from your site)
• Use the default behavior (_self) for internal links navigating within your own pages
• Use it when context would be lost if the page changed, like linking to a reference while the user is filling out a form

Some accessibility guidelines also suggest you should give users a heads-up when a link opens in a new tab, something like adding “(opens in new tab)” in the link text or using an icon. It’s a small thing that improves the experience for screen reader users especially.

<!-- Good practice: hint that it opens in a new tab -->
<a href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
  Read the documentation (opens in new tab)
</a>

Speaking of that rel="noopener noreferrer" part, there’s a very specific reason it should always travel with target="_blank". Let’s talk about that.

03The Security Problem with target=”_blank”

Here’s something that catches most beginners off guard: using target="_blank" without any additional attributes creates a security vulnerability called tabnapping.

Here’s how it works. When you open a new tab using target="_blank", the newly opened page gets access to a JavaScript object called window.opener. Through window.opener, that external page can actually redirect your original page to a completely different URL without the user noticing.

Imagine you click a link on a site, a new tab opens with a third-party page, and in the background your original tab silently redirects to a fake login screen. The user switches back, sees what looks like the original site asking them to log in again, and types in their credentials.

That’s tabnapping. It’s a real attack vector, and it’s fixed with two words.

04rel=”noopener noreferrer”: The Fix You Should Always Use

Add rel="noopener noreferrer" to every link that uses target="_blank". No exceptions.

<!-- Unsafe: the new tab can access window.opener -->
<a href="https://external-site.com" target="_blank">
  Visit External Site
</a>

<!-- Safe: window.opener access is blocked -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  Visit External Site
</a>

What does each value actually do?

• noopener: blocks the new tab from accessing window.opener. The security fix.
• noreferrer: prevents the browser from sending the Referer header to the destination page, so they don’t know which page sent the user there. It also implies noopener, so technically you could use just this one, but using both is the safest habit.

Use them together, always. It’s become such a standard practice that many code editors and linters will warn you if you write target="_blank" without rel="noopener noreferrer".

05The rel Attribute in HTML: It Does More Than Security

The rel attribute stands for “relationship.” It describes the relationship between the current page and the page being linked to. Browsers use it, search engines use it, and security tools use it.

You’ve already seen noopener and noreferrer. But rel has several other values worth knowing, especially once you start caring about SEO.

nofollow Link HTML: Telling Search Engines to Skip a Link

rel="nofollow" is an instruction to search engine crawlers. It tells them: “Follow this link if you want, but don’t pass any ranking credit through it.”

In the world of SEO, links act like votes. When one page links to another, it passes something called “link equity” or “PageRank”, essentially telling Google that the linked page is trustworthy. A nofollow link HTML tag says “I’m linking here, but I’m not vouching for this page.”

When should you use it?

• Links in comment sections (you didn’t write those, you can’t vouch for them)
• Links in user profiles or forums
• Links to pages you don’t fully trust but need to reference
• Links in ads (though rel="sponsored" is actually more correct, more on this discussed below))

<!-- nofollow: no SEO credit passes through this link -->
<a href="https://user-submitted-site.com" rel="nofollow">
  User Submitted Resource
</a>

<!-- Combined with target blank for external links -->
<a href="https://partner-site.com" target="_blank" rel="noopener noreferrer nofollow">
  Partner Site
</a>

Notice something cool in that second example: rel can take multiple space-separated values. rel="noopener noreferrer nofollow" is perfectly valid. You’re just stacking multiple relationship declarations on the same link.

rel=”sponsored”: For Paid and Affiliate Links

Google introduced sponsored in 2019 specifically for paid links and affiliate links. If you’re writing a review and earning a commission on the linked product, rel="sponsored" is the correct attribute to use.

<!-- Affiliate or sponsored link -->
<a href="https://shop.example.com/product" rel="sponsored">
  Buy this product (affiliate link)
</a>

Using sponsored keeps you compliant with Google’s webmaster guidelines and is generally better practice than throwing nofollow on everything paid-related.

rel=”ugc”: For User-Generated Content

ugc stands for “user-generated content.” It’s the right choice for links that appear inside comments, forum posts, or any content written by your users rather than you.

<!-- Link posted by a user in a comment section -->
<a href="https://user-shared-link.com" rel="ugc nofollow">
  Link shared by a user
</a>

You can combine ugc and nofollow together which many sites do automatically for any user-submitted link.

06The HTML download Attribute: Letting Users Save Files

This one is genuinely useful and surprisingly simple. The download attribute tells the browser: “Don’t navigate to this link, download the file instead.”

Without it, clicking a link to a PDF or image will either open it in the browser or navigate away. With download, the browser triggers a file download prompt immediately.

<!-- Clicking this downloads the PDF instead of opening it -->
<a href="/files/report-2025.pdf" download>
  Download the Report
</a>

<!-- You can also download images -->
<a href="/images/wallpaper.jpg" download>
  Download Wallpaper
</a>

Notice that download is a boolean attribute — you don’t need to give it a value. Just writing download on its own is enough to activate it.

Renaming the Downloaded File

Here’s a nice trick: if you give download a value, that value becomes the filename the browser suggests when saving.

<!-- The downloaded file will be named "annual-report-2025.pdf" -->
<a href="/files/doc-v3-final-FINAL.pdf" download="annual-report-2025.pdf">
  Download Annual Report
</a>

<!-- Rename an image on download -->
<a href="/uploads/img_8472.jpg" download="profile-photo.jpg">
  Download Your Profile Photo
</a>

This is really useful when your actual file name on the server is ugly or auto-generated. You can present the user with a clean, meaningful filename without having to rename the file on your server.

One important note: the download attribute only works for same-origin files (files on your own domain). For cross-origin URLs, the browser will likely just navigate to the link instead of downloading. This is a browser security restriction, not something you can override in HTML alone.

07Putting It Together: Real Combinations You’ll Actually Use

In practice, these attributes rarely appear alone. Here are the patterns you’ll write most often and why each combination makes sense.

<!-- 1. External link opening safely in a new tab -->
<a href="https://github.com/user/project" target="_blank" rel="noopener noreferrer">
  View Project on GitHub
</a>

<!-- 2. External link with no SEO credit, new tab -->
<a href="https://example-partner.com" target="_blank" rel="noopener noreferrer nofollow">
  Visit Partner Site
</a>

<!-- 3. Sponsored / affiliate link -->
<a href="https://shop.example.com/item" rel="sponsored noopener" target="_blank">
  Buy this item (affiliate link)
</a>

<!-- 4. File download with a clean suggested filename -->
<a href="/assets/resume-template.pdf" download="resume-template.pdf">
  Download Resume Template
</a>

<!-- 5. Link in a user comment (typical CMS output) -->
<a href="https://user-link.com" rel="ugc nofollow noopener" target="_blank">
  User Shared Link
</a>

Seeing them side by side like this helps it click. Notice how each combination serves a clear purpose. You’re not just stacking attributes randomly, each one has a job.

08Common Mistakes with Link Attributes

Let’s run through the errors that come up most often.

Using target=”_blank” Without rel=”noopener noreferrer”

This is the big one. Every target="_blank" needs rel="noopener noreferrer". If you do nothing else from this article, do that.

Putting rel=”nofollow” on Every External Link

Some people slap nofollow on every single external link “just in case.” That’s not how it works. Use nofollow (or sponsored/ugc) for specific situations. Linking to a credible external resource you genuinely recommend? Let that link pass equity. It’s the right call for the user, and search engines understand that.

Using download on Cross-Origin URLs

As mentioned earlier, download doesn’t work cross-origin. If the file is on a different domain, the browser will navigate to it instead of downloading it. Keep your downloadable assets on your own domain.

Forgetting That rel Can Hold Multiple Values

<!-- Wrong: using two separate rel attributes -->
<a href="https://example.com" rel="noopener" rel="noreferrer">Link</a>

<!-- Right: space-separated values in one rel attribute -->
<a href="https://example.com" rel="noopener noreferrer">Link</a>

Multiple rel attributes on the same element doesn’t work, the second one gets ignored. Always put all your rel values in a single attribute, separated by spaces.

Writing download=”” Instead of Just download

<!-- Both of these work for triggering a download -->
<a href="/file.pdf" download>Download</a>
<a href="/file.pdf" download="my-file.pdf">Download</a>

<!-- This also works but is unnecessary -->
<a href="/file.pdf" download="">Download</a>

Using download as a boolean (no value) is clean and totally valid. Only add a value when you want to suggest a specific filename.

09What You Learned Today

We covered a lot of ground here. You now know how target="_blank" works and critically why it should always come with rel="noopener noreferrer" attached. You understand what the rel attribute in HTML is actually doing when it says nofollow, sponsored, or ugc. And you know how the HTML download attribute works to trigger file downloads and even rename them on the fly.

These aren’t just syntax trivia, every one of these attributes solves a real problem. Security, SEO, user experience. The more intentional you are with link attributes, the better your pages will be for the people using them.

In the next article, we’ll look at fragment identifiers like how they let you create jump-to-section links, add smooth scrolling, and make navigation more accessible with skip links. Subscibe to our Newsletter and Stay Updated.