🔗 Phase 3 · Links & Media🟢 BeginnerModule 04

Links & Anchors

⏱ 20 min read📖 6 sections🧩 5-question quiz🏆 1 challenge

Course Progress31% complete

The anchor element <a> is the foundation of the web. Without it, the World Wide Web wouldn't be a web — just a collection of isolated pages. Links connect documents, create navigation, trigger downloads, open emails, and even scroll users to specific sections of the same page.

Section 1

The Anchor Element

The <a> (anchor) element creates a hyperlink. Its most important attribute is href (hypertext reference) — the destination URL. The element wraps the clickable content, which can be text, an image, or other HTML elements.

HTMLBasic anchor syntax

<!-- Text link -->
<a href="https://bitwithbite.com">Visit BitWithBite</a>

<!-- Image link -->
<a href="https://bitwithbite.com">
  <img src="logo.png" alt="BitWithBite Home">
</a>

<!-- Button-style link (div wrapped) -->
<a href="/signup" class="btn">Get Started Free</a>

Section 2

Absolute vs Relative URLs

The href value can be an absolute URL (full address) or a relative URL (path relative to the current file). Use absolute for external sites and relative for internal pages.

HTMLURL types

<!-- Absolute URL — full address including protocol -->
<a href="https://bitwithbite.com/courses">Courses</a>

<!-- Relative URL — same folder -->
<a href="about.html">About</a>

<!-- Relative URL — go up one folder, then into pages/ -->
<a href="../pages/contact.html">Contact</a>

<!-- Root-relative — starts from domain root -->
<a href="/courses/html">HTML Course</a>

URL Type	Starts with	Use when
Absolute	`https://`	Linking to external websites
Root-relative	`/`	Internal links on same domain (reliable)
Relative	`./` or `../`	Internal links, portable across domains

Section 3

The target and rel Attributes

Use target to control where the link opens. Use rel to declare the relationship between pages — critical for security and SEO.

HTMLtarget and rel

<!-- Open in new tab -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

<!-- Same tab (default) -->
<a href="/about">About Us</a>

<!-- nofollow tells search engines not to follow this link -->
<a href="https://partner.com" rel="nofollow">Partner Site</a>

🔒

Always use rel="noopener noreferrer" with target="_blank"

Without noopener, a page opened in a new tab can access the opener's window object via window.opener — a security vulnerability called "reverse tabnapping". Modern browsers block this by default, but always include it for safety.

Section 4

Special Link Types

⚓

Anchor Link

Jumps to an element with matching id on the same page

href="#section-2"

📧

Email Link

Opens the user's email client with a pre-filled address

href="mailto:hello@site.com"

📞

Phone Link

On mobile, dials the number directly

href="tel:+44123456789"

⬇️

Download Link

Triggers a file download instead of navigating to it

download="report.pdf"

HTMLSpecial link types

<!-- Same-page anchor: target element must have matching id -->
<a href="#contact">Jump to Contact</a>
<section id="contact">...</section>

<!-- Email link (can pre-fill subject and body) -->
<a href="mailto:hello@bitwithbite.com?subject=Hi there">Email Us</a>

<!-- Phone link -->
<a href="tel:+441234567890">+44 1234 567890</a>

<!-- Download link -->
<a href="/files/cheatsheet.pdf" download="html-cheatsheet.pdf">
  Download Cheatsheet
</a>

Section 5

Accessible Links

Links must be accessible to everyone, including keyboard-only users and screen reader users. Poor link text like "click here" or "read more" is meaningless out of context.

HTMLAccessible vs inaccessible links

<!-- ❌ BAD: vague link text, meaningless out of context -->
<p>To read about HTML basics, <a href="/html">click here</a>.</p>
<a href="/article">Read more</a>

<!-- ✅ GOOD: descriptive link text -->
<a href="/html">Read the HTML Fundamentals course</a>
<a href="/article">Read the full article about CSS Grid</a>

<!-- Icon link needs aria-label for screen readers -->
<a href="https://github.com" aria-label="Visit our GitHub repository">
  <img src="github-icon.svg" alt="">
</a>

🧩 Quick Check — Lesson 11

5 questions · instant feedback

1. What does the href attribute specify in an <a> element?

2. Which attribute+value opens a link in a new browser tab?

3. Why should you add rel="noopener noreferrer" when using target="_blank"?

4. What href value creates a link to an email address?

5. Which link text is most accessible?

🏆

Quiz Complete!

Links mastered! Time to learn about images.

🏆

Lesson 11 Challenge

Code exercise · 15 min

Build a contact page with every type of link.

Create a contact page that includes all of the following links:

1. An external link to a social media profile (opens in new tab with correct rel attributes)
2. A relative link to your homepage (../index.html or /)
3. A mailto link pre-filled with a subject line: mailto:you@example.com?subject=Hello
4. A tel link with a phone number
5. A downloadable CV/resume file
6. A same-page anchor that jumps to a section id="faq" further down the page

Each link must have descriptive link text (no "click here" or "read more").

Show hints

External links: target="_blank" + rel="noopener noreferrer"
Email subject: use ?subject= after the email address
Anchor links: href="#id" + element must have matching id="id"
Download: use the download attribute with a suggested filename

← Lists

Lesson 11 of 35HTML Fundamentals

Images →