🔗 Phase 5 · Links & Navigation🟢 BeginnerMODULE 14
Hyperlinks
Course progress40%
🎯 What you'll learn: The
<a> tag and href, opening links in a new tab safely with target and rel, and special link types — mailto:, tel:, and download.
Section 1
The Anchor Tag & href
The <a> (anchor) element creates a hyperlink. Its href attribute ("hypertext reference") points to the destination — another page, another site, a file, or a location within the same page.
a-basic.html
HTML
<!-- Absolute URL: full address, works from anywhere --> <a href="https://bitwithbite.com">Visit BitWithBite</a> <!-- Relative URL: relative to the current page's location --> <a href="about.html">About Us</a> <a href="../index.html">Home</a>
| Type | Example | When to use |
|---|---|---|
| Absolute | https://site.com/page | Linking to another domain |
| Relative | page.html, ../folder/page.html | Linking within your own site |
| Root-relative | /folder/page.html | Same site, path from the domain root |
Section 2
Opening Links Safely in a New Tab
target="_blank" opens a link in a new tab. It must always be paired with rel="noopener noreferrer" — without it, the new page gets partial access to the original page via window.opener, a real security and performance risk known as "tabnabbing."
a-target-rel.html
HTML
<!-- Correct: safe external link --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> External site </a> <!-- Risky: missing rel attribute --> <a href="https://example.com" target="_blank"> Don't do this alone </a>
⚠️
noopener vs noreferrer
noopener blocks the new page's access to window.opener (fixes the security risk). noreferrer additionally hides the referring URL from the destination page. Using both together is the standard, safest combination.Section 3
Email & Phone Links
Special href schemes trigger the device's default app instead of navigating to a webpage.
a-mailto-tel.html
HTML
<!-- Opens the user's email client --> <a href="mailto:support@bitwithbite.com">Email Support</a> <!-- Pre-fill subject and body --> <a href="mailto:support@bitwithbite.com?subject=Help&body=Hi there">Contact Us</a> <!-- Opens the phone dialer on mobile --> <a href="tel:+923001234567">Call Us</a>
Section 4
Download Links
The download attribute tells the browser to download the file instead of navigating to it — useful for PDFs, resumes, or worksheets. Give it a value to rename the downloaded file.
a-download.html
HTML
<!-- Downloads instead of navigating --> <a href="resume.pdf" download>Download Resume</a> <!-- Renames the downloaded file --> <a href="worksheet-v3-final.pdf" download="Lesson-14-Worksheet.pdf"> Download Worksheet </a>
💡
download only works same-origin
The download attribute is ignored for cross-origin links (a file hosted on a different domain) for security reasons — the browser will navigate to it instead. It works reliably only for files on your own site.
🧩 Knowledge Check — Lesson 14
5 questions to test your hyperlink knowledge.
1. What does target="_blank" combined with rel="noopener noreferrer" protect against?
2. Which href value opens the user's email app with the address pre-filled?
3. What does the download attribute do?
4. Why does download get ignored for cross-origin links?
5. Which is a valid relative link from a page at /courses/html/lesson-14.html to /index.html?
Coding Challenge — Lesson 14
Apply what you learned · Beginner Level
Challenge: Build a Contact Links Block
Create a set of 4 links:
1. A safe external link to "https://example.com" opening in a new tab
2. A mailto: link to "hello@example.com" with a pre-filled subject "Question"
3. A tel: link to a phone number of your choice
4. A download link for "brochure.pdf" renamed to "Company-Brochure.pdf"
Create a set of 4 links:
1. A safe external link to "https://example.com" opening in a new tab
2. A mailto: link to "hello@example.com" with a pre-filled subject "Question"
3. A tel: link to a phone number of your choice
4. A download link for "brochure.pdf" renamed to "Company-Brochure.pdf"
💡 Show hints if you're stuck
- New tab:
target="_blank" rel="noopener noreferrer" - Subject:
mailto:hello@example.com?subject=Question - Download rename:
download="Company-Brochure.pdf"
Finished this lesson?
Mark it complete to track your progress.
Module 14 of 62Phase 5 — Links & Navigation