Chapter 5 — Links & Navigation

Learning Outcome

Create all types of hyperlinks and build navigation between pages.

← 04 - Text Formatting & Content | Next → 06 - Lists

5.1 The Anchor Tag `<a>`

The <a> (anchor) tag creates hyperlinks. The href attribute is the destination.

<a href="https://www.google.com">Visit Google</a>

Key Attributes

`target` Values

Security with target="_blank"

Always add rel="noopener noreferrer" when using target="_blank". Without it, the opened page can access and manipulate the original tab via JavaScript.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open in new tab (safe)
</a>

5.2 Types of Links

Absolute URLs

Full address including the protocol.

<a href="https://www.w3schools.com/html/">W3Schools HTML</a>

Relative URLs

Path relative to the current file — used for linking pages on the same website.

<!-- Link to a file in the same folder -->
<a href="about.html">About Us</a>

<!-- Link to a file in a subfolder -->
<a href="pages/contact.html">Contact</a>

<!-- Link to a file one level up -->
<a href="../index.html">Go Home</a>

Anchor / Fragment Links

Jump to a section on the same page using id.

<!-- Link that jumps to a section -->
<a href="#about">Jump to About</a>
<a href="#projects">Jump to Projects</a>

<!-- The target sections — must have matching id -->
<h2 id="about">About Me</h2>
<h2 id="projects">My Projects</h2>

Email Links

<a href="mailto:hello@example.com">Send Email</a>

<!-- Pre-fill subject and body -->
<a href="mailto:hello@example.com?subject=Inquiry&body=Hi there">
  Email with subject
</a>

Phone Links

<!-- Opens phone dialler on mobile -->
<a href="tel:+919876543210">Call +91 98765 43210</a>

Download Links

<!-- Triggers download instead of navigation -->
<a href="resume.pdf" download>Download Resume</a>

<!-- Custom download filename -->
<a href="report-2024.pdf" download="Annual-Report.pdf">Download Report</a>

5.3 Image as a Link

Wrap <img> inside <a> to make an image clickable.

<a href="https://example.com">
  <img src="logo.png" alt="Company Logo — go to homepage" width="200">
</a>

5.4 Navigation Bar Pattern

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="portfolio.html">Portfolio</a>
  <a href="contact.html">Contact</a>
</nav>

Always Use <nav> for Navigation

Wrapping navigation links in <nav> is semantic HTML — screen readers and search engines identify it as the site's navigation section.

5.5 Link Best Practices

Good Link Habits

Write descriptive link text — not "click here" or "read more"
✅ <a href="resume.pdf">Download my resume</a>
❌ <a href="resume.pdf">Click here</a>
Always add alt text when an image is a link
Use rel="noopener noreferrer" with target="_blank"
Use relative URLs for internal links — easier to maintain

🚀 Recommended Projects

Project 1 — Multi-page Website

Build 3 HTML pages (Home, About, Contact) linked to each other using a <nav> bar. Each page should have a consistent navigation at the top.

Project 2 — Resource Hub Page

Create a categorised links page — educational websites, YouTube channels, tools. Use anchor tags with target="_blank" and rel="noopener noreferrer". Group links under <h2> headings and use fragment links in a table of contents at the top.

📌 Quick Recall

<a href="...">text</a> = hyperlink
target="_blank" = opens in new tab (add rel="noopener noreferrer")
href="#id" = jump to section on same page
href="mailto:..." = email link | href="tel:..." = phone link
download attribute = triggers file download
Always use descriptive link text — not "click here"