Basic Link Syntax
<!-- 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
<!-- 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 |
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
<!-- 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>Four Kinds of href, and a Security Footgun
The value you put in href changes where the link goes. Mixing these up is the #1 cause of "broken links" after moving files.
| href value | Goes to | Example |
|---|---|---|
| Absolute URL | another site | https://site.com/page |
| Root-relative | your site from the root | /about.html |
| Document-relative | relative to current file | ../images/logo.png |
| Fragment | a spot on the page | #contact |
target="_blank" with rel="noopener"
A link that opens a new tab gives the new page a window.opener reference back to yours — it can then redirect your original tab to a phishing page (tabnabbing). rel="noopener" severs that link. Modern browsers do this by default, but stating it protects older ones and documents intent.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External site</a>Two more useful forms: <a href="mailto:you@site.com"> opens the mail client, and <a href="/report.pdf" download> forces a download instead of navigating.
🏋️ Practical Exercise
- Create a link to an external website using a full URL.
- Create a link to another page in your own site using a relative path.
- Make a link open in a new tab with
target="_blank". - Create an anchor link that jumps to a section on the same page using
#id. - Turn an image into a clickable link by wrapping
<img>in<a>.
🔥 Challenge Exercise
Build a small navigation bar with four links: Home, About, an external link that opens in a new tab with rel="noopener", and an in-page anchor to a "Contact" section lower on the page. Add id="contact" to that section and confirm the anchor scrolls to it.
📋 Summary
<a href="url">text</a>— the anchor tag creates a hyperlink.target="_blank"opens in a new tab — always pair withrel="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.downloadtriggers file download.
Interview Questions
- Which attribute makes an
<a>tag point somewhere? - What is the difference between an absolute and a relative link?
- What does
target="_blank"do, and why pair it withrel="noopener"? - How do in-page anchor links work?
- Can you wrap block-level content inside an
<a>tag in HTML5?
Related Topics
FAQ
Without it, the page you open can reach back to yours via window.opener — a security and performance risk. rel="noopener" (often with noreferrer) severs that link.
A broken link points to a URL or file path that no longer exists (a 404) or was mistyped. Always re-test relative paths after moving or renaming files.