HTML Links
1. Introduction
Links are what make the web a web — without them, pages would exist in isolation. The HTML anchor element <a> creates hyperlinks to other pages, files, email addresses, phone numbers, and even specific spots on the same page. Mastering links means understanding the href attribute in all its forms, controlling how links open, and writing descriptive link text for accessibility.
2. Concept
Types of href Values
| href Value | Type | Example |
|---|---|---|
https://example.com |
Absolute URL (external) | <a href="https://example.com"> |
/about |
Root-relative (same site) | <a href="/about"> |
../contact.html |
Document-relative URL | <a href="../contact.html"> |
#section-2 |
Fragment (same-page anchor) | <a href="#section-2"> |
mailto:hello@site.com |
Email link | <a href="mailto:hello@site.com"> |
tel:+441234567890 |
Phone link | <a href="tel:+441234567890"> |
#id) require a matching id attribute on the target element. When clicked, the browser scrolls to that element.javascript:void(0) as an href. Use a <button> for JavaScript-triggered actions, and reserve <a> for actual navigation.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links Demo</title>
</head>
<body>
<!-- Absolute external link -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Root-relative internal link -->
<a href="/tutorials">All Tutorials</a>
<!-- Same-page anchor -->
<a href="#chapter-2">Jump to Chapter 2</a>
<!-- Email link -->
<a href="mailto:support@example.com">Email Support</a>
<!-- Phone link -->
<a href="tel:+441234567890">Call Us: +44 123 456 7890</a>
<!-- Download link -->
<a href="/files/guide.pdf" download="HTML-Guide.pdf">
Download HTML Guide (PDF)
</a>
<!-- Target anchor elsewhere on the page -->
<h2 id="chapter-2">Chapter 2</h2>
<p>This is the target of the same-page anchor above.</p>
</body>
</html>
4. How It Works
Step 1 — External Links with target=”_blank”
Adding target="_blank" instructs the browser to open the link in a new tab. The rel="noopener noreferrer" attributes prevent the new tab from accessing window.opener (security) and avoid passing the referrer URL (privacy).
Step 2 — Root-Relative vs Document-Relative
A path starting with / is root-relative — it resolves from the site’s root regardless of the current page location. A path without / is document-relative and resolves from the current file’s directory.
Step 3 — Fragment Anchors
href="#chapter-2" tells the browser to scroll to the element with id="chapter-2" on the current page. This requires no page reload.
Step 4 — The download Attribute
Adding download to a link forces the browser to download the file instead of navigating to it. The optional value sets the suggested filename.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resources | Dev Academy</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/courses">Courses</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Free Learning Resources</h1>
<nav aria-label="Page contents">
<a href="#html-resources">HTML Resources</a> |
<a href="#css-resources">CSS Resources</a>
</nav>
<section id="html-resources">
<h2>HTML Resources</h2>
<p>
The best reference is
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
target="_blank" rel="noopener noreferrer">
MDN HTML Documentation
</a>.
</p>
<a href="/downloads/html-cheatsheet.pdf" download="html-cheatsheet.pdf">
Download HTML Cheat Sheet (PDF)
</a>
</section>
<section id="css-resources">
<h2>CSS Resources</h2>
<p>Browse the
<a href="https://css-tricks.com" target="_blank" rel="noopener noreferrer">
CSS-Tricks website
</a> for guides and demos.
</p>
</section>
</main>
<footer>
<p>Questions? <a href="mailto:hello@devacademy.com">Email us</a></p>
</footer>
</body>
</html>
6. Common Mistakes
❌ Vague link text
<p>To download the guide, <a href="/guide.pdf">click here</a>.</p>✓ Descriptive link text
<a href="/guide.pdf" download>Download the HTML Beginner's Guide (PDF)</a>❌ Using href=”#” as a placeholder for JavaScript actions
<a href="#" onclick="doSomething()">Open Modal</a>✓ Use a <button> for non-navigation actions
<button type="button" onclick="doSomething()">Open Modal</button>7. Try It Yourself
8. Quick Reference
| Attribute / Value | Purpose | Example |
|---|---|---|
href="https://…" |
Absolute external URL | Links to another site |
href="/page" |
Root-relative internal link | Same-site navigation |
href="#id" |
Same-page anchor | Scroll to section |
href="mailto:e@x.com" |
Email link | Opens mail client |
href="tel:+1…" |
Phone link | Dial on mobile |
target="_blank" |
Open in new tab | External resources |
download |
Force file download | download="report.pdf" |