Links and Navigation

Introduction

Links are what make the web a web. The <a> element connects pages, files, email addresses, phone numbers, and in-page sections. This chapter covers href, absolute and relative URLs, safe external links, anchor jumps, and building navigation with <nav>.

Prerequisites

• Text semantics and entities
• A small multi-file practice folder (for example index.html and about.html)

The Anchor Element

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

Good link text describes the destination:

<a href="/docs/html/01_what_is_html">Read the HTML introduction</a>

Weak link text:

<a href="/docs/html/01_what_is_html">click here</a>

Absolute URLs

An absolute URL includes the full address:

<a href="https://www.example.com/pricing">Pricing</a>
<a href="mailto:support@example.com">Email support</a>
<a href="tel:+15551234567">Call us</a>

Use absolute URLs for:

• external sites
• mailto: and tel: links
• canonical links to a known domain

Relative URLs

A relative URL is resolved against the current page location.

If your site looks like:

site/
├── index.html
├── about.html
└── docs/
    └── guide.html

From index.html:

<a href="about.html">About</a>
<a href="docs/guide.html">Guide</a>

From docs/guide.html back to home:

<a href="../index.html">Home</a>

Relative links make local development and deployment portable. Keep folder names consistent and avoid spaces in paths.

Linking to Files

Download or open non-HTML files:

<a href="files/report-2026.pdf">Download 2026 report (PDF)</a>
<a href="images/photo.webp">View photo</a>

Optional download hint:

<a href="files/report-2026.pdf" download>Download report</a>

The download attribute suggests downloading instead of navigating, but browser behavior varies. Always use clear link text that mentions the file type.

Opening Links in a New Tab

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

In-Page Anchors

Jump to a section on the same page with a fragment:

Rules:

• Put id on the target element (usually a heading or section)
• Use href="#id" on the link
• id values must be unique on the page
• Use short, descriptive ids: setup, not section-2-final-v3

Link from another page to a specific section:

<a href="guide.html#setup">Jump to Setup in the guide</a>

The browser loads guide.html and scrolls to #setup.

Building Navigation with <nav>

Wrap major navigation links in <nav>:

aria-label helps when a page has more than one nav (main, footer, sidebar). aria-current="page" marks the active link for assistive technology.

Navigation can be a list:

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="articles.html">Articles</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Lists announce the number of items to screen readers—a nice improvement for menus.

Breadcrumb Pattern

Show hierarchy on documentation or e-commerce sites:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li><a href="/docs/html/">HTML</a></li>
    <li aria-current="page">Links</li>
  </ol>
</nav>

The last item is the current page and often is not a link.

Link States (Preview)

Browsers style links with pseudo-classes (CSS topic):

• unvisited
• visited
• hover
• active (while clicking)
• focus (keyboard)

HTML defines the link; CSS styles the states. Keep focus visible for keyboard users when you add styles later.

Mini Project: Three-Page Site

Create:

mini-site/
├── index.html
├── about.html
└── contact.html

Each page should share:

• the same <nav> with relative links
• one h1 describing the page
• aria-current="page" on the correct nav link
• one in-page anchor on index.html (for example #features)

Test every link locally with Live Server.

Common Mistakes

Empty or missing href

<a>Broken link</a>

Always provide href unless you have a deliberate JavaScript pattern (advanced).

Wrong relative path after moving files

If about.html moves into pages/about.html, update every link that pointed to it.

Duplicate id values

Two elements with id="intro" break anchor targets.

Links that look like buttons

Use <a href="..."> for navigation and <button type="button"> for actions on the same page. Mixing them confuses semantics and keyboard behavior.

FAQ

What is the difference between href and src?

href is for links (user navigates). src is for embedded resources (browser loads into the page), such as images and scripts.

Can I link to a specific heading without id?

Browsers do not jump reliably without an id (or legacy name on anchors). Add id to the target heading or section.

Should external links always use target="_blank"?

No. Default same-tab navigation is usually better. Use new tabs when leaving your docs would interrupt a task the user is completing on your site.

Are # links valid?

href="#" jumps to the top of the page. Empty javascript placeholders are an old pattern—avoid them in modern accessible pages.

What comes next?

Images and responsive images — img, alt, srcset, and <picture>.