HTML Links – Anchor Tags, href, target, rel Explained

Basic Link Syntax

HTML

<!-- Basic link structure -->
<a href="https://ylearner.org">Visit ylearner</a>
<!--  ↑ tag   ↑ destination        ↑ link text  -->

<!-- The href (Hypertext REFerence) attribute is the URL -->
<!-- The content between tags is the clickable text -->

All Link Types

HTML

<!-- 1. External link (absolute URL) — opens same tab -->
<a href="https://github.com">GitHub</a>

<!-- 2. External — opens NEW tab (target="_blank") -->
<!-- ALWAYS add rel="noopener noreferrer" for security -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  GitHub (new tab)
</a>

<!-- 3. Internal link — same site, relative path -->
<a href="about.html">About</a>
<a href="../index.html">Up one folder</a>
<a href="/contact.html">Absolute path from root</a>

<!-- 4. Jump link — scroll to element with matching id -->
<a href="#pricing">Jump to Pricing</a>
<!-- Somewhere on the page: -->
<h2 id="pricing">Pricing Plans</h2>

<!-- 5. Email link -->
<a href="mailto:hello@example.com">Email us</a>
<!-- Pre-fill subject and body: -->
<a href="mailto:hello@example.com?subject=Hello&body=I%20wanted%20to%20say...">
  Email with subject
</a>

<!-- 6. Phone link (tappable on mobile) -->
<a href="tel:+447700900000">+44 7700 900000</a>

<!-- 7. Download link -->
<a href="/files/report.pdf" download>Download Report</a>
<!-- Custom filename: -->
<a href="/files/report-2026.pdf" download="annual-report.pdf">Download</a>

Relative vs Absolute Paths

Path type	Example	When to use
Absolute URL	`https://example.com/page.html`	External sites only
Root-relative	`/about.html`	Internal links — reliable across folders
Relative	`../images/photo.jpg`	Internal links relative to current file

⚠️

Security: always use rel="noopener noreferrer" with target="_blank"

Without rel="noopener", the opened page can access your page via window.opener — a security vulnerability called "reverse tabnapping". Always add rel="noopener noreferrer" when opening external links in new tabs.

Image Links

HTML

<!-- Wrap any element in <a> to make it clickable -->
<a href="https://ylearner.org" aria-label="ylearner homepage">
  <img src="/assets/logo.png" alt="ylearner logo" width="120">
</a>

📋 Summary

<a href="url">text</a> — the anchor tag creates a hyperlink.
target="_blank" opens in a new tab — always pair with rel="noopener noreferrer".
Use root-relative paths (/page.html) for internal links — most reliable.
Fragment links (#id) jump to elements with matching id on the same page.
href="mailto:" opens email client. href="tel:" dials on mobile. download triggers file download.