🌱BeginnerLinks
Link Targets and Relationships
Master link behavior with target, rel, download attributes and relative vs absolute URLs.
Overview
Links do more than just point to a URL. Attributes on the <a> element control how the link opens, how it is treated by security policies, what relationship it has to your site, and whether it triggers a download.
Key link attributes beyond href:
- target: where to open the link (_self, _blank, _parent, _top)
- rel: relationship between pages (noopener, noreferrer, nofollow, sponsored, ugc)
- download: triggers a file download instead of navigation
- Relative vs absolute URLs: each has different use cases
Key Points
- •target="_blank" opens in a new tab always pair with rel="noopener noreferrer"
- •rel="nofollow" tells search engines not to pass link equity to the target
- •rel="sponsored" marks paid/affiliate links; rel="ugc" marks user-generated content
- •download attribute triggers download with optional filename: download="report.pdf"
- •Absolute URLs (https://example.com/page) for external sites
- •Relative URLs (/about, ../contact, ./sibling.html) for same-site pages
Examples
Target attribute options
<!-- Same tab (default) -->
<a href="/about" target="_self">About</a>
<!-- New tab -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
External Site
</a>
<!-- Inside a frame: parent frame -->
<a href="/page" target="_parent">Up to parent</a>The rel attribute for SEO and security
<!-- Don't pass link equity (sponsored content, ads) -->
<a href="https://affiliate.com" rel="nofollow sponsored">
Sponsored Product
</a>
<!-- User-generated content (comments, forums) -->
<a href="https://user-link.com" rel="nofollow ugc">
User's link
</a>
<!-- Security for new tab links -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Open safely
</a>Download attribute
<!-- Download a file -->
<a href="/files/report.pdf" download>Download PDF</a>
<!-- Download with a custom filename -->
<a href="/api/export?format=csv" download="sales-report.csv">
Export CSV
</a>download only works for same-origin URLs or data: URLs due to browser security.
Relative URLs explained
<!-- Current page: https://example.com/courses/html/beginner/topic -->
<!-- Root-relative: starts from domain root -->
<a href="/about">About</a> → https://example.com/about
<!-- Relative to current folder -->
<a href="topic2">Next topic</a> → https://example.com/courses/html/beginner/topic2
<!-- Up one folder -->
<a href="../index">Course index</a> → https://example.com/courses/html/indexCommon Mistakes
- Using target="_blank" without rel="noopener noreferrer" security vulnerability
- Using download on cross-origin URLs browsers may ignore the attribute
- Mixing absolute and relative URLs inconsistently within a site
Note
On internal site links, always use root-relative paths (/about, /courses) rather than full absolute URLs. This makes your site portable between domains and environments.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4